Question

我尝试将Knockout与require js一起使用，但我无法绑定viewmodel中的数据。

HTML

<!doctype html>
<html lang="en">
<head>
    <title>SPA</title>
    <!-- Load the script "js/main.js" as our entry point -->
    <script data-main="js/app" src="js/lib/require.js"></script>
</head>
<body>

Today's message is: <span data-bind="text: myMessage"></span>

</body>
</html>

app.js

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "jquery",
      "knockout-3.4.0":"knockout-3.4.0",
      "custom":"../custom/custom-script",
      "customKO":"../custom/custom-knockout"

    }
});
require(['knockout-3.4.0', 'customKO'], function(ko, appViewModel) {
    ko.applyBindings(new appViewModel());
});
// Load the main app module to start the app
requirejs(["app/main"]);

main.js

define(["jquery", "knockout-3.4.0", "jquery.alpha", "jquery.beta" , "custom" , "customKO"], function($ , ko) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();

    });

});

custon-knockout.js

//Main viewmodel class
define(['knockout-3.4.0'], function(ko) {
    return function appViewModel() {
      var viewModel = {
        myMessage: ko.observable() // Initially blank
    };
    viewModel.myMessage("Hello, world!"); // Text appears
    };
});

但我收到以下错误

未捕获的ReferenceError：无法处理绑定＆＃34; text：function（）{return myMessage}＆＃34; 消息：未定义myMessage

Answer 1

您正在调用appViewModel作为构造函数（使用new），但在其中创建了一个局部变量viewModel，而不是将成员添加到this，就像this.myMessage = ko.observable();。

Answer 2

你不能生成一个可以构造并返回属性的类

define(['knockout-3.4.0'], function(ko) {
    return function appViewModel() {
        var self = this;
        self.myMessage: ko.observable() // Initially blank
        self.myMessage("Hello, world!"); // Text appears
      };
   };
});

RequireJs with Knockout

2 个答案: