【翻译】Part 4 - FlickrView: Implementing SettingsView

阅读更多

英文原链接： http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part4/
上一篇， FlickerView: Implementing FeedView,我们实现了Feed view，并且使用JSON请求回来的数据更新ScrollableView。这一篇我们关注Settings view如何处理各种输入小部件（TextBox,Switch,RadioButton）的get和set以及使用跳转事件。
SettingsView属性
我们只需要保留一些小部件引用，以及当前语言选择。

return declare([ScrollableView], {
    feedView: '',
    tagInput: '',
    selectSwitch: '',
    selectedLanguage: '',
//...

SettingsView启动
跟我们在FeedView启动方法做的一样：调用父方法和初始化属性:

startup: function () {
    this.inherited(arguments);
    this.feedView = registry.byId("feed");
    this.tagInput = registry.byId("tags");
    this.selectSwitch = registry.byId("select");
    // ...
}

同时增加一些有用的getters和setters方法：

setTags: function (tags) {
    this.tagInput.set('value', tags);
},
getTags: function () {
    return this.tagInput.get('value');
},
setTagMode: function (tagmode) {
    this.selectSwitch.set('value', (tagmode === "all") ? "on" : "off");
},
getTagMode: function () {
    return (this.selectSwitch.get('value') === "on") ? "all" : "any";
}

dojox/mobile/switch有两个状态：on和off.我们准备将ALL设置对应on状态，ANY对应off状态。
继续启动方法，我们创建一个方法，当用户点击单选项时，保留选中的语言。dojo/on的这个强大特性可以实现这个功能： even delegation with selector.

// handler to record the selected feed language
this.on("[name=feedLanguage]:click", lang.hitch(this, function (e) {
    this.selectedLanguage = e.target.value;
}));

接下来做什么？
添加Done按钮的处理方法：

• 编程实现转换回Feed View
• 如果用户修改至少一个设置时，强制刷新视图

// handler to update search query parameters when done button is selected
registry.byId("doneButton").on("click", lang.hitch(this, function () {
    // we are done with the settings: transition to FeedView
    this.performTransition("feed");
    // check if anything changed in the setting view
    if (this.getTags() !== flickrview.QUERY.tags ||
        this.getTagMode() !== flickrview.QUERY.tagmode ||
        this.selectedLanguage !== flickrview.QUERY.lang) {
        // update QUERY
        flickrview.QUERY.tags = this.getTags();
        flickrview.QUERY.tagmode = this.getTagMode();
        flickrview.QUERY.lang = this.selectedLanguage;
        // force FeedView list refresh
        this.feedView.refresh()
    }
}));

因为编程实现的转换，所以要关掉小部件自身的自动转换功能，使用 moveTo:'#'

最后一步就完成了！
响应转换事件
Dojo Mobile提供一组 转换相关的事件，还在在启动方法中，我们设置事件beforeTransitionIn的处理方法，在转换到设置视图时得到通知。

// handler to get notified before a transition to the current view starts
this.on("beforeTransitionIn", lang.hitch(this, function () {
    this.setTags(flickrview.QUERY.tags);
    this.setTagMode(flickrview.QUERY.tagmode);
    this.selectedLanguage = flickrview.QUERY.lang;
    registry.byId(this.selectedLanguage).set('checked', true);
}));

在这个处理方法中，我们更新设置视图上的输入小部件，从QUERY对象取到真实的值。
清理代码
这个教程的前面部分，我们首先创建了一个模型应用，这是一个最佳实践，从模型开始可以快速和简便地得到用户体验。
移除HTML中的模型代码
现在我们的应用已经完成，所以可以移除所有的静态模型代码了。这样可以减少代码量和得到整洁的代码。

• FeedView：移除列表项。
• DetailView：移除静态描述。

移除阻止缓存的元标签
移除开发时使用的阻止缓存标签，让应用允许缓存到设备。

你成功了！
祝贺！你已经开发完成一个完整的Dojo Mobile应用程序，下一篇（本教程最后一篇）将告诉你怎么将应用产品化。
View Demo
下载源码
下载 Part 4 - FlickrView: Implementing SettingsView.


============================================
Part 4 END
next Part 5 - Build FlickrView for production