Question

以下是来自knockoutjs网站教程的样本。我的问题有点复杂，我想为我们的Web应用程序创建可重用的向导，控件或组件。

以下场景代表我面临的一个非常常见的问题，即模板绑定与视图模型属性不同。如果我们看一下person-template是由'name'属性绑定的，它将来自具有'name'属性的视图模态。现在想象一下我有两个视图模型非常相似但有一些属性名称不同的情况。（如果买家和卖家的属性名称'BuyerName'，'SellerName'，有没有办法我可以创建模板，所以我可以绑定到动态属性。

我的意思是在这个例子中将与买方和卖方合作。任何建议或任何想法都将受到欢迎。

我的问题比这更复杂，而且我很困难。

感谢。

<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
     // Now name property is bind, where as view model has two
     // properties named BuyerName and SellerName, so it is not going to work.
     <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

<script type="text/javascript">
     function MyViewModel() {
         this.buyer = { BuyerName: 'Franklin', credits: 250 };
         this.seller = { SellerName: 'Mario', credits: 5800 };
     }
     ko.applyBindings(new MyViewModel());
</script>

Answer 1

那么经典的多态性问题

您必须链接模板，基本模板person-template应该只包含BuyerViewModel和SellerViewModel都具有的数据绑定。

任何附加绑定都必须位于买方模板和卖方模板

中

像

这样的东西

<script id="buyer-template" type="text/html">
   <!-- Fields shared by both classes -->
   <div data-bind="template: { data: $data, template: 'person-template' }></div> 
   <!-- fields for buyer only -->
</script>

Answer 2

假设您通过AJAX调用获取数据到服务器，我建议使用魔法绑定对象将逻辑放入其中：

如果是您的简单示例，您可以将新属性添加到从服务器获取的对象模型，并对您的html绑定使用该新属性。请检查customizing object construction using create。

或者你只需要很简单的方法，然后用手定义你想要的新模型，然后将从服务器获得的数据绑定到新模型（同样可以在映射对象中使用create。） / p>

knockoutjs动态模板绑定动态属性名称

2 个答案: