1

これは非常に初心者の質問かもしれませんし、一度にたくさんのものを使っているかもしれません。Revealing Module PatternでKnockoutJSを使用し、CoffeeScriptを作成しようとしています。モデルを別の関数に入れました。コードは次のとおりです。

myapp =(->
    person =->
        firstname = ko.observable "k"
        lastname = ko.observable "d"

        firstname:firstname,
        lastname:lastname

    person : person
)()

$(->
    ko.applyBindings(new myapp.person())
    @
)

これで、VisualStudioのワークベンチを使用して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());
})

誰かがここで何が悪いのか説明できますか？または、KnockoutJSを使用するCoffeeScriptを作成する別の方法はありますか？

さらに詳細が必要な場合はコメントしてください。

4

1 に答える 1

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（new myapp.person（））を呼び出すと、すべてのmyappオブジェクトではなく、personオブジェクトのみにビューを設定するためです。

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>​
于 2012-08-02T14:15:52.657 に答える