Question

我是durandal的新人。我试图使用mimosa skelton在durandal提供的演示应用程序中添加一个新模块。

我在this

中创建了以下模块步骤

当我运行应用程序时，我收到错误

Uncaught Error: Failed to load routed module (viewmodels/myPage). Details: ko is not defined

我的模块backend.js

define(function(require){
  return {
    getCustomers:function(){
      //do some ajax and return a promise
        return $.ajax({
          url: 'http://graph.facebook.com/facebook?callback=?',
          dataType: 'json',
        }).promise();
    }
  };
});

my myPage.js

define(function (require) {
    var backend = require('backend');

    return {
        customer:ko.observable(),
        activate:function(){
          var that = this;
          return backend.getCustomers().then(function(result){
            that.customer(result);
          });
        }
      };
});

myPage.html下

<h1>Getting facebook fan page details using jquery</h1>
<p id="cover-page"></p>
<table class="zebra-style">
    <tr><td>Name </td><td><p class="facebook_name" data-bind="html:name"></p></td></tr>
    <tr class="odd"><td>About </td><td><p class="facebook_about"></p></td></tr>
    <tr><td>No of Likes </td><td><p class="facebook_likes"></p></td></tr>
    <tr  class="odd"><td>Website </td><td><p class="facebook_website"></p></td></tr>
    <tr><td>Category </td><td><p class="facebook_category"></p></td></tr>
    <tr class="odd"><td>Founded </td><td><p class="facebook_founded"></p></td></tr>
    <tr><td>Fan Page Url </td><td><p class="facebook_link"></p></td></tr>
    <tr  class="odd"><td>People Talking About Your Page </td><td><p class="facebook_talk_count"></p></td></tr>
</table>

我做错了什么？如何解决这个问题？

Answer 1

由于Durandal 2.0 Knockout不再是全局依赖，而是通过RequireJs加载。

因此，您需要在模块中调用var ko = require('knockout');以使Knockout可用：

define(function (require) {
    var backend = require('backend');
    var ko = require('knockout');

    return {
        customer:ko.observable(),
        activate:function(){
          var that = this;
          return backend.getCustomers().then(function(result){
            that.customer(result);
          });
        }
      };
});

Answer 2

myPage.js中的

ko使用时没有说明需要它。使用与上面相同的common.js语法并假设您已为knockout定义了一个路径，这将声明依赖关系。

define(function (require) {
    var backend = require('backend');
    var ko = require('knockout');

    return {
        customer:ko.observable(),
        activate:function(){
          var that = this;
          return backend.getCustomers().then(function(result){
            that.customer(result);
          });
        }
      };
});

虽然AMD对jquery的处理略有不同，但在backend.js中定义jquery依赖也是一致的。

define(function(require){
  var $ = require('jquery');

  return {
    getCustomers:function(){
      //do some ajax and return a promise
        return $.ajax({
          url: 'http://graph.facebook.com/facebook?callback=?',
          dataType: 'json',
        }).promise();
    }
  };
});

添加：除了上面的common.js语法之外，默认的AMD语法也经常在Durandal应用程序中使用。两者都是等价的，这是个人风格的问题。

define(['backend', 'knockout'], function (backend, ko) {

 return {
    customer:ko.observable(),
    activate:function(){
      var that = this;
      return backend.getCustomers().then(function(result){
        that.customer(result);
      });
    }
  };
});

ko没有定义错误durandal

2 个答案: