JS 视图中的可观察助手
Observable helpers in JS Views
我正在尝试根据提供给助手的可观察对象更新元素。
可观察:
var siteGlobal = {
page: null,
parent: null
};
帮手
$.views.helpers({
navState: function(id) {
var cssClass = "nav_item";
if (Number(id) === siteGlobal.parent) {
cssClass += " current_page_parent";
} else if (Number(id) === siteGlobal.page) {
cssClass += " current_page_item";
}
return cssClass;
}
});
$.views.helpers.navState.depends = [siteGlobal, "parent"];
$.views.helpers.navState.depends = [siteGlobal, "page"];
元素
<li data-link="class{:~navState(id)}" >...</li>
所以我们的想法是,当可观察对象发生变化时,助手会做出响应,比较链接元素提供的值。
是的,那行得通。
你需要
$.views.helpers.navState.depends = [siteGlobal, "parent", "page"];
现在如果 id
是 3
,你调用
$.observable(siteGlobal).setProperty("page", 3);
然后 class 将设置为 "nav_item current_page_item"
通话
$.observable(siteGlobal).setProperty("parent", 3);
它将设置为 "nav_item current_page_parent"
我正在尝试根据提供给助手的可观察对象更新元素。
可观察:
var siteGlobal = {
page: null,
parent: null
};
帮手
$.views.helpers({
navState: function(id) {
var cssClass = "nav_item";
if (Number(id) === siteGlobal.parent) {
cssClass += " current_page_parent";
} else if (Number(id) === siteGlobal.page) {
cssClass += " current_page_item";
}
return cssClass;
}
});
$.views.helpers.navState.depends = [siteGlobal, "parent"];
$.views.helpers.navState.depends = [siteGlobal, "page"];
元素
<li data-link="class{:~navState(id)}" >...</li>
所以我们的想法是,当可观察对象发生变化时,助手会做出响应,比较链接元素提供的值。
是的,那行得通。
你需要
$.views.helpers.navState.depends = [siteGlobal, "parent", "page"];
现在如果 id
是 3
,你调用
$.observable(siteGlobal).setProperty("page", 3);
然后 class 将设置为 "nav_item current_page_item"
通话
$.observable(siteGlobal).setProperty("parent", 3);
它将设置为 "nav_item current_page_parent"