揭示模塊模式，KnockoutJS和CoffeeScript

Question

這可能是一個非常初學者的問題，或者我一次使用太多東西。我正在嘗試使用KnockoutJS和Revealing 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的方法？

如果需要更多細節，請發表評論。

Answer 1

這裏是工作示例：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（新myapp.person（））設置只有一個人的觀點不是所有的myapp對象。

如果你想設置你的觀點，你需要改變這樣的代碼整個MYAPP：

JSfiddle Link

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>​