機能から観測可能なノックアウトアクセス

Question

この問題は混乱します。ノックアウトはko.applyBindings()メソッドを使用してMVVMパターンを更新します。下のコードで私の機能を見ることができます。最初に私は空を作成しますvm私はgetJSON()メソッドを介してデータを埋めるために他の関数を呼び出します。メソッドは正常に動作しています。

var vm = {}; 
function GetData(){ 
    vm=GetMockData(); 
    LoadUserData(); 
    LoadCategories(); 
    LoadSkills(); 
    return vm; 
} 

私の混乱は私の仕事は、ユーザの入力に応じて、この値を格納することで、ここから始まります。

<input data-bind='' placeholder="Enter your name"/> 

トップのHTMLセクションで、その値を好きなものにバインドします。 GetMockData().obj.User.Name。しかし、働いていない。

function GetMockData(){ 
    var obj={ 
     User:{ 
      Name: ko.observable().extend({ 
       required: true, 
       minLength: 2, 
       maxLength: 15 
      }), 
      Surname: "Fake Surname" 
     } 
    return obj; 
} 

applyBindings()私は以下のコードセクションを呼び出します。

ko.applyBindings(new GetData()); 

私は以下の部分で混乱します。他の関数から呼び出された関数User.Nameを得るには、applyBindings()から直接ではなく、別の関数からその部分に到達しているからです。 データバインド値をHTMLに書き込む方法を教えてください。

<input data-bind='' placeholder="Enter your name"/> 

Answer 1

は、最初に私はあなたが実際にここで取得したものに非常に混乱していました。この時点でも、私はまだ完全には分からない。しかし、ここであなたを助けるための私の最高の試みです。

私が理解しているように、あなたが解決しようとしている主な問題は、「水分補給」の問題です。何かを何かで埋めるために遅延的に実行されるプロセスです。また、それを何かの状態を「リセット」する手段として見ることもできます。以下は、私がこの問題を解決する方法のスニペットであり、水和の両面を例示しています。

JavaScriptが今、私たちは釘付けJavaScriptの側面を持っていることを

function User() { 
    var self = this; 

    self.Name = ko.observable().extend({ 
     required: true, 
     minLength: 2, 
     maxLength: 15 
    }); 

    self.Surname = ko.observable(); 

    self.Hydrate = function(){ 
     self.Surname("Fake SureName"); 
    }; 
}; 

function AppModel(){ 
    var self = this; 

    self.User = {}; 

    self.Hydrate = function(){ 
     var user = new User(); 
     user.Hydrate(); 
     self.User = user; 
    }; 
}; 

var app = new AppModel(); 
app.Hydrate(); 
ko.applyBindings(app); 

、のは、DOMに移りましょう。テキストフィールドでユーザーからの入力を受け取るには、2つの主要なオプション、valueとtextInputがあります。 valueは、ぼかしイベントの観測値を更新します（キーアップのtextInput）。どちらがあなたに最も役立つかを決めることができます。

HTML

<input data-bind="textInput: User.Name" placeholder="Enter your name"/> 

それはあなたがこのソリューションを拡張するために探しているなら、それはあなたのクラスのプロトタイプにビューモデル関数（ない観測）を適用するのが最善だということに注意することが重要です。これと同じように：サイドノートとして

function AppModel(){ 
    var self = this; 

    self.User = {}; 
}; 

AppModel.prototype.Hydrate = function(){ 
    var self = this; 

    var user = new User(); 

    self.User(user); 
}; 

、あなたのコードを見てから、あなたがノックアウトソリューションを「まとめ」する方法についての理解を少し欠けているかもしれないようです。私はノックアウトウェブサイトで提供されているtutorialsをチェックして、より良いアーキテクチャ感覚を得ることを強くお勧めします。また、ノックアウトチームの一員であるRyan Niemeyerによるvideoも古いですが、依然として非常に重要です。