Question

如何移动在html文件外使用knockout的javascript代码？我想创建一个单独的文件，其中所有内容都被处理（或尽可能多）。模板还应该有效。提前谢谢！

编辑：所做的更改。我在我的Scripts文件夹中添加了require.js并制作了app.js和viewmodel.js文件。但这仍然行不通。非常感谢任何帮助：）

EDIT2：几乎在那里，Rumesh Eranga使用require.js给出了正确答案。我的绑定只留下一点问题。 'data-bind =“text：$（item.name）”'不会显示名称，只显示'[object Object]'。

编辑3：已解决！

这是HTML文件：

<head>
<script type="text/javascript" data-main="Script/app.js" src="Scripts/require.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery.tmpl.js"></script>
<script id="shoppingItemTemplate" type="text/html">
    <li><span data-bind="text: item.name"></span></li>
</script>

<div id="ActiveShoppingList">
<h2>Shopping items</h2>
<div id="ActiveList">
    <ul data-bind="template: {name:'shoppingItemTemplate', foreach: items, as:'item'}"></ul>
    <button data-bind="click:addItem">Add item</button>
</div>
</div>
</body>

这是我的脚本/ app.js：

require(['knockout-3.2.0', 'viewmodel'], function(ko, viewmodel) {
ko.applyBindings(new viewmodel);
});

这是我的脚本/ viewmodel.js：

define(['knockout-3.2.0'], function(ko) {
return function viewmodel (){
    this.items = ko.observableArray([new item("item1"), new item("item2")]);
    this.addItem = function()
        {
            this.items.push(new item("new item"));
        };
};

function item(name)
{
    return { name: ko.observable(name) };
}
});

Answer 1

使用RequireJs的异步模块定义（AMD）。

可以找到关于需求和淘汰赛的好文章here。

从网站引用。

HTML

<html>
    <head>
        <script type="text/javascript" data-main="scripts/init.js" src="scripts/require.js"></script>
    </head>
    <body>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>First name capitalized: <strong data-bind="text: firstNameCaps"></strong></p>
    </body>
</html>

范围/ init.js

require(['knockout-x.y.z', 'appViewModel', 'domReady!'], function(ko, appViewModel) {
    ko.applyBindings(new appViewModel());
});

脚本/ appViewModel.js

// Main viewmodel class
define(['knockout-x.y.z'], function(ko) {
    return function appViewModel() {
        this.firstName = ko.observable('Bert');
        this.firstNameCaps = ko.pureComputed(function() {
            return this.firstName().toUpperCase();
        }, this);
    };
});

根据上面给出的代码片段，您可以看到您可以将视图模型代码与html分开，甚至可以模块化，这非常有用。

如何在html页面之外移动Knockout viewmodel

1 个答案: