通过 Javascript 敲除绑定属性答案

【问题标题】：Knockout binding attribute via Javascript通过 Javascript 敲除绑定属性
【发布时间】：2014-07-07 19:14:30
【问题描述】：

我可以做类似的事情

var friendss="<div id='two' data-theme='a' class='ui-content'>
<ul id='tust' 
data-role='listview'>
<li><a href='#'><img data-bind='attr:{src: friend.img}' alt='Friend'><p data-bind='text:
 friend.name'></p>
</a>
</li>
</ul>
</div>";

然后

$("#tust").attr("data-bind","foreach:{data:friends(), as:'friend'}");

基本上我在这里想要实现的是，通过 js 将 html 附加到正文，然后也通过 js 插入 data-bind 属性（在填充了上述 html 的 dom 之后）如果没有，我该如何实现上述功能，即通过 javascript 插入数据绑定。谢谢

【问题讨论】：

为什么以后要添加data-bind？如果您已经从服务器获取填充数据并且它不会更改，那么为敲除绑定添加数据绑定有什么意义？
@SujeshArukil 我基本上是在开发一个单页应用程序（SPA），为此我希望能够通过 js 完成上述所有操作
您在推出自己的 SPA 吗？或者计划使用像 Durandal 这样的框架？如果您正在推出自己的 SPA，您的模板应该已经设置了数据绑定属性，并且以后不会添加。使用 requirejs 文本插件拉入您的模板文件并使用 ko.applyBindings 将其绑定到适当的视图模型。
感谢您的建议，会调查他们

标签： javascript jquery data-binding knockout.js

【解决方案1】：

您可以使用模板绑定。例如。定义模板：

<script type="text/html" id="myTemplate">
    <div id="two" data-theme="a" class="ui-content">
        <ul id="tust" data-bind="foreach: {data: friends, as: 'friend'}" data-role="listview">
            <li>
                <a href="#">
                    <img data-bind="attr: {src: friend.img}" alt="Friend">

                    <p data-bind="text: friend.name"></p>
                </a>
            </li>
        </ul>
    </div>
</script>

然后是实际的绑定：

&lt;div id="random123" data-bind="template: {name: 'myTemplate', data: {friends: friends()}}"&gt;&lt;/div&gt;

如果您需要动态添加，只需绑定 DOM 元素。

ko.applyBindings(theMVVM, $("#random123")[0]);

【讨论】：

谢谢，它有帮助，被选为答案