如何将 Knockout viewmodel 移到 html 页面之外

Question

如何将使用敲除的 javascript 代码移动到 html 文件之外？我想创建一个单独的文件来处理所有内容（或尽可能多）。模板也应该仍然有效。提前致谢！

编辑：进行了更改。我在我的脚本文件夹中添加了 require.js 并创建了一个 app.js 和 viewmodel.js 文件。但这仍然行不通。非常感谢任何帮助:)

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

EDIT3：已解决！

这是 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>

这是我的 Script/app.js:

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

这是我的 Script/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

将异步模块定义 (AMD) 与 RequireJs 结合使用。

关于Require和knockout的好文章可以找到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>

scope/init.js

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

scripts/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 分开，甚至可以模块化，这非常有帮助。

如何将 Knockout viewmodel 移到 html 页面之外

How to move Knockout viewmodel outside html page

html

javascript

templating

knockout.js