【发布时间】：2014-08-03 17:33:26
【问题描述】：
我想做什么，我认为需要您在 foreach 或模板绑定中增加每个呈现项目的单独 bindingContexts。
可以通过实例化自定义模板引擎来扩展renderTemplateSource 中的bindingContext 来完成。但这似乎很老套。一定有更好的办法。
什么是更好的方法？这是我的首要问题。
我还想在 foreach 绑定的匿名模板中自动添加一些绑定。这也是，我可以用我的自定义模板引擎来做，但是 afaik 会强制以“数据绑定”属性字符串的形式添加自动绑定。也很时髦。
有没有更简洁的方法让您的自定义绑定潜入其他绑定中，在来自 foreach 的东西上？这是我的第二个问题。
下面是我想要做的更详细的解释。如果你能推荐一些更酷更干净的东西，我谢谢你。
我正在尝试编写一个名为“uiList”的自定义绑定，以便这样使用：
<ul data-bind="uiList: people">
<li>
<span data-bind="text: name"></span>
...other stuff ...
</li>
<ul>
基本上，“foreach”的别名。但我也想要一些典型的列表小部件交互性，例如通过单击来“选择”一个项目。并且一次只选择一个项目。
为了详细说明我的例子，我想让人们的名字可以像这样编辑：
<ul data-bind="uiList: people">
<li>
<span data-bind="text: name, visible: !$selected()"></span>
<input type="text" data-bind="value: name, visible: $selected()">
</li>
<ul>
换句话说，与整个列表的 ui 相关但与数据无关的信息（如选择、禁用等）应在绑定上下文中以简洁明了的方式提供，如上面的$selected 属性。
对于完整的功能，我的 html 可能如下所示：
<ul class="ui-list" data-bind="uiList: people">
<li class="ui-list-item" data-bind="click: function () {$selected(true)}, css: $selected() ? 'ui-state-selected' : ''">
<span data-bind="text: name, visible: !$selected()"></span>
<input type="text" data-bind="value: name, visible: $selected()">
</li>
<ul>
...但这是我希望 uiList 自动化的东西。用户只需要像前面的例子那样写。
这是我的自定义绑定处理程序代码的外观：
var ExtendedForeachTemplateEngine = function (contextExtender, bindings) {
this.allowTemplateRewriting = false;
this.contextExtender = contextExtender;
//prep a data-bind="..." string from the given bindings to
//sneak in on rendered anon templates
this.bindingStr = [];
for (var bindingName in bindings) {
this.bindingStr.push(bindingName + ':' + bindings[bindingName]);
}
this.bindingStr = this.bindingStr.join(', ');
};
ExtendedForeachTemplateEngine.prototype = new ko.templateEngine();
ExtendedForeachTemplateEngine.prototype.renderTemplateSource = function (templateSource, bindingContext) {
//extend the binding context
this.contextExtender(bindingContext);
//sneak in bindings rendered anon templates. Only on the first
//Element node.
var nodes = templateSource.nodes().cloneNode(true).childNodes;
for (var i = 0; i < nodes.length; i ++) {
if (nodes[i].nodeType !== 1) continue;
var nodeBindings = nodes[i].getAttribute('data-bind');
if (nodeBindings) {
nodeBindings += ', ' + this.bindingStr;
} else {
nodeBindings = this.bindingStr;
}
nodes[i].setAttribute('data-bind', nodeBindings);
break;
}
return nodes;
}
/*
Takes data like a regular foreach. also takes a binding context-extender
callback function, and some bindings to add to each rendered template.
*/
ko.bindingHandlers['extendedForeach'] = {
init: function (el, va, al, vm, bc) {
var opts = va();
ko.applyBindingsToNode(el, {
template: {
foreach: opts.data,
templateEngine: new ExtendedForeachTemplateEngine(opts.contextExtender, opts.bindings)
}
}, bc);
}
};
/*
uiList
-----------
Classes:
- adds class ui-list to the bound element
- renders the inner html for each given item.
- inner html gets ui-list-item class
Selection
- click on one of the rendered item and it is selected.
- context property $selected holds selectedness.
- selected items have class ui-state-selected,
- Only one item can be selected at a time.
*/
ko.bindingHandlers['uiList'] = {
init: function (el, va, al, vm, bc) {
var items = va();
console.log(items);
var selectedItem = ko.observable(null);
ko.applyBindingsToNode(el, {
extendedForeach: {
data: items,
bindings: {
css: "'ui-list-item' + ($selected() ? ' ui-state-selected' : '')",
click: "function () { $selected(true); }"
},
contextExtender: function (context) {
context.$selected = ko.computed({
read: function () {
return selectedItem() === context.$index();
},
write: function (val) {
selectedItem(val ? context.$index() : null);
}
});
}
}
}, bc);
$(el).addClass('ui-list');
return {controlsDescendantBindings: true};
}
};
【问题讨论】：
标签： knockout.js custom-binding