Knockoutjs中组件之间的双向绑定

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在寻找创建可重用组件，我只是无法创建我需要的双向绑定，而没有外部库，比如我见过的邮箱子/ 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>

回答：

可以使用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

以上是 Knockoutjs中组件之间的双向绑定 的全部内容， 来源链接： utcz.com/qa/262493.html

回到顶部