Question

我是淘汰赛的新手，我在装有requirejs的模块中使用observable时遇到了问题。

代码非常简单，它使用在html中声明的viewmodel。当我使用require加载viewmodel时，observables变量的行为就像一个函数，所以我必须使用括号来访问变量。但是当我尝试使用输入改变值时，就会发生。此外，当我从回调函数向可观察数组添加值时，UI不会更新。

有一种方法可以加载模块并继续使用不带括号的变量吗？。

我尝试使用构造函数和共享对象实例，但问题仍然存在。

的index.html

<div data-bind="component: 'cmp'"></div>
<script>
    (document).ready(function () {
         ko.components.register('cmp', {require: '../Models/cmp'});
         ko.applyBindings();
    });
<script>

/Models/cmp.js

define(['knockout-3.4.0'], function (ko) {
function MyComponentViewModel(params) {
    self = this;        
    self.firstName = ko.observable("John");
    self.lastName = ko.observable("Doe");
    self.sel = ko.observableArray(['France', 'Germany', 'Spain']);     
}
return {
    viewModel: MyComponentViewModel,
    template: { require: 'text!../Models/cmp.html' }                
};  

});

/Models/cmp.html

<p>First name: <strong data-bind="text: firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: lastName()">todo</strong></p>
<select data-bind="options: sel()" class="form-control" id="sel"></select>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName()" /></p>

resullt：

名字：function c（）{if（0 ....

姓氏：Doe

Answer 1

我猜你在index.html文件中加载了require.js和knockout.js。 ko在index.html中使用，因此它必须在全局范围内。如果是这种情况，淘汰赛将被加载两次，并且可能导致与您描述的类似的问题。

无论如何，我会在index.html文件中使用require入口点，并将ko作为依赖项注入。

<html>
<head>
<title>test</title>
</head>
<body>
<script src="require.js"></script>
<div data-bind="component: 'cmp'"></div>
<script>
    require(["knockout-3.4.0"], function(ko) {
        ko.components.register('cmp', {require: 'Models/cmp'});
        ko.applyBindings();
    });
</script>
</body>
</html>

cmp.js（注意html文件的路径更改）

define(['knockout-3.4.0'], function (ko) {
    function MyComponentViewModel(params) {
        self = this;        
        self.firstName = ko.observable("John");
        self.lastName = ko.observable("Doe");
        self.sel = ko.observableArray(['France', 'Germany', 'Spain']);     
    }
    return {
        viewModel: MyComponentViewModel,
        template: { require: 'text!Models/cmp.html' }                
    };  
});

cmp.html

<p>First name: <strong data-bind="text: firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>
<select data-bind="options: sel()" class="form-control" id="sel"></select>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

在项目的根目录，我有index.html，knockout-3.4.0.js，require.js和text.js.我在“Models”子文件夹（rootDir \ Models）中包含了cmp.js和cmp.html。

最后一点，如果您大量使用knockout.js，可能更容易在全局范围（脚本标记）中加载knockout.js，而不是在每个javascript模块中将其用作依赖项。

当在装有requierejs的模块中使用knockout observable时，我无法更新值

1 个答案: