我正在寻找创建可重用的组件,我只是无法创建我需要的双向绑定而没有外部库,例如我见过的邮箱子/ pub。
这是我想要做的codepen示例
这是一个非常基本的例子,但它显示了我需要的东西。
mainViewModel
有一个属性name
,我需要从name-input
组件。
我已经习惯了2+角和使用双向绑定,KO有类似的东西吗?
谢谢
史蒂夫
编辑:Javascript:
ko.components.register("name-input", {
viewModel: function(params) {
var self = this;
self.userInput = ko.observable();
return self;
},
template: "<div><input data-bind='textInput: userInput' placeholder='Enter your name'><br/>Hello,<span data-bind='text:userInput'></span></div>"
});
function mainViewModel() {
var self = this;
self.name = ko.observable();
}
ko.applyBindings(new mainViewModel(), $("#main")[0]);
HTML:
<body>
<div id="main">
<div id="inner-container">
MyName:
<div data-bind="text:name"></div>
</div>
<name-input></name-input>
</div>
</body>
您可以使用params
属性传递组件实例的可观察引用以读取和写入:
<name-input params="value: name"></name-input>
在组件的viewmodel函数中,您引用此值而不是创建新的observable:
function(params) {
var self = this;
self.userInput = params.value;
return self;
}