揭示模块模式、KnockoutJS和CoffeeScript

Revealing Module Pattern, KnockoutJS, and CoffeeScript

本文关键字:KnockoutJS CoffeeScript 模式 模块      更新时间:2023-09-26

这可能是一个非常初级的问题,也可能是我同时使用了太多东西。我正在尝试将KnockoutJS与Revearing Module Pattern一起使用,并尝试编写CoffeeScript。我把我的模型放在一个单独的函数中。这是代码:

myapp =(->
    person =->
        firstname = ko.observable "k"
        lastname = ko.observable "d"
        firstname:firstname,
        lastname:lastname
    person : person
)()
$(->
    ko.applyBindings(new myapp.person())
    @
)

现在,这是在Visual Studio中使用工作台创建JavaScript,如下所示:

(function() {
  var myapp;
  myapp = (function() {
    var person;
    person = function() {
      var firstname, lastname;
      firstname = ko.observable("k");
      lastname = ko.observable("d");
      return {
        firstname: firstname,
        lastname: lastname
      };
    };
    return {
      person: person
    };
  })();
  $(function() {
    ko.applyBindings(new myapp.person());
    return this;
  });
}).call(this);

现在,这给出了一个错误,它现在可以找到要绑定的元素。以下是简单的HTML文本:

<p>
    Firstname<span data-bind="text: myapp.person().firstname"></span>
    Lastname<span data-bind="text: myapp.person().lastname">
    </span>
</p>

如果我在没有自调用函数的情况下创建正常的JavaScript,它可以正常工作。以下是功能:

myapp = (function () {
    var person;
    person = function () {
        var firstname, lastname;
        firstname = ko.observable("k");
        lastname = ko.observable("j");
        return {
        firstname : firstname,
        lastname : lastname
        }
    }
    return {
        person: person
    }
})();

$(function () {
    ko.applyBindings(new myapp.person());
})

有人能解释一下这里出了什么问题吗?或者有没有其他方法可以编写CoffeeScript来使用KnockoutJS?

如果需要进一步的细节,请发表评论。

下面是一个工作示例:http://jsfiddle.net/gurkavcu/Kqa2k/

myapp = (->
    person =->
        firstname = ko.observable "jack"
        lastname = ko.observable "sparrow"
        firstname:firstname,
        lastname:lastname
    person : person
)()
$(->
    ko.applyBindings(new myapp.person())
    @
)

​您需要更改绑定语法:

<p>
    Firstname: <span data-bind="text:firstname"></span>
    Lastname: <span data-bind="text:lastname">
    </span>
</p>​ 

因为当您调用ko.applyBindings(new-myapp.person())时,您只为一个person对象而不是所有myapp对象设置了视图。

如果你想为整个myapp设置你的视图,你需要像这样更改你的代码:

JSfiddle链接

myapp = (->
    person = (fname,lname)->
        firstname = ko.observable fname
        lastname = ko.observable lname
        firstname:firstname,
        lastname:lastname
    person : new person("Jack" , "Sparrow")    
)()
$(->
    ko.applyBindings(myapp)    
    @
)
<p>
    Firstname: <span data-bind="text:person.firstname"></span>
    Lastname: <span data-bind="text:person.lastname">
    </span>
</p>​