2017-12-18 144 views
0

我正在寻找创建可重用组件,我只是无法创建我需要的双向绑定,而没有外部库,比如我见过的邮箱子/ pub。Knockoutjs中组件之间的双向绑定

这里是什么,我试图做

这是一个非常简单的例子为例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> 

回答

1

可以使用params属性传递组件实例可观察到的参考读取和写入:

<name-input params="value: name"></name-input> 

在组件的视图模型功能,您引用的,而不是创建一个新的观察到这个值:

function(params) { 
    var self = this; 
    self.userInput = params.value; 
    return self; 
} 

Running example in a fork of your Codepen