带有动态属性名称的 knockoutjs 动态模板绑定答案

【问题标题】：knockoutjs dynamic template binding with dynamic property name带有动态属性名称的 knockoutjs 动态模板绑定
【发布时间】：2013-09-03 08:48:30
【问题描述】：

以下是从 knockoutjs 网站教程中获取的示例。我的问题有点复杂，我想为我们的 Web 应用程序创建可重用的向导、控件或组件。

以下场景代表了我面临的一个非常常见的问题，即模板绑定与视图模型属性不同。如果我们查看人员模板是由“名称”属性绑定的，该属性将来自具有“名称”属性的视图模式。现在想象一下我有两个视图模型非常相似但有一些属性名称不同的情况。（如买方和卖方的属性名称为“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>

【问题讨论】：

如何获取数据？它们是预定义的还是通过 AJAX 调用的？
嗨，ebram，我正在通过 Ajax 调用获取数据。谢谢

标签： knockout.js

【解决方案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>

【讨论】：

感谢您的建议，是的，它会像这样工作，但我必须为两个模板复制以下代码，因为它们之间的唯一区别只是属性名称 -
。有没有办法动态传递属性名称，因为它会节省大量的模板和代码重复。感谢展示如何在模板中使用模板。再次感谢。
将BuyerName 和SellerName 重命名为Name？ :D
是的，它也可以，但是您需要更改最初创建的数据模型。您需要遍历所有对象并在服务器或客户端上更改属性名称。这是可行的，但有些工作，并试图编写不必要的代码。非常感谢您的建议。愿这是唯一的选择。再次感谢。
使用映射插件是一个选项，添加一个计算等。很多方法

【解决方案2】：

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

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

或者你用简单的小长的方法去手动定义你想要的新模型，然后将从服务器获取的数据绑定到新模型（同样你可以在映射对象中使用create）。

【讨论】：