KnockoutJS: modelview'den ayrı model

Question

Birden çok görünüm modeli tarafından kullanılan bir modelim var ve vm'ler tarafından izlenen modeli güncellemek için başka javascript bileşenlerine ihtiyacım var. Bu derste, nasıl yapılacağı hakkında hiçbir fikrim yok, modeli “viewmodel” de “karıştırıyorlar”.

var ConversationModel = { 
    conversations: ko.observableArray(), 
    open: function(userId){ 
     for(var i = 0; i < this.conversations.length; i++){ 
      if(this.conversations[i].userId == userId){ 
       return; 
      } 
     } 

     var self = this; 
     var obj = ko.observable({ 
      userId: userId 
     }); 

     self.conversations.push(obj); 

     UserManager.getUserData(userId, function(user){ 
      $.getJSON(Routes.messenger.getConversation, "receiver=" + userId, function(data){ 
       obj.receiver = user; 
       obj.data = data; 
      }); 
     }); 
    } 
}; 

function ConversationDialogViewModel() { 
    var self = this; 

    this.conversations = ko.computed(function(){ 
     return ConversationModel.conversations; 
    }); 

    console.log(this.conversations()); 

    this.conversations.subscribe(function(context){ 
     console.log(context); 
    }); 
} 

Answer 1

Sen nasıl birleştirileceği bir (makul) iyi bir örnek here bulabilirsiniz:

1. Bileşenler
Sayfa
2. ViewModel
3. Merkez þebekeþebeke (için Buraya
   benim kodudur Örneğin, API'leri çağırmak veya farklı bileşenler arasında durum bilgisi sağlamak için)

Lütfen kodun ES2015 olduğunu unutmayın (yeni Javascript), ancak isterseniz basit Javascript de yazabilirsiniz. Gulp komut dosyası, bileşenlerde herhangi bir html şablonunun dizgelenmesini içerir, böylece bir dosya olarak birleştirilir ve yüklenir ancak ayrı öğeler olarak düzenlenir.

örneği bileşeni:

const ko = require('knockout') 
    , CentralData = require('../../service-providers/central-data') 
    , CentralState = require('../../service-providers/central-state') 
    , template = require('./template.html'); 

const viewModel = function (data) { 

    //Make service providers accessible to data-bind and templates 
    this.CentralData = CentralData; 
    this.CentralState = CentralState; 

    this.componentName = 'Component One'; 
    this.foo = ko.observable(`${this.componentName} Foo`); 
    this.bar = ko.observableArray(this.componentName.split(' ')); 
    this.barValue = ko.observable(""); 
    this.bar.push('bar'); 
    this.addToBar = (stuffForBar) => { 
     if(this.barValue().length >= 1) { 
      this.bar.push(this.barValue()); 
      CentralData.pushMoreData({firstName: this.componentName,secondName:this.barValue()}); 
     } 
    }; 
    this.CentralState.signIn(this.componentName); 
    if (CentralData.dataWeRetrieved().length < 10) { 
     var dataToPush = {firstName : this.componentName, secondName : 'Foo-Bar'}; 
     CentralData.pushMoreData(dataToPush); 
    } 
}; 
console.info('Component One Running'); 
module.exports = { 
    name: 'component-one', 
    viewModel: viewModel, 
    template: template 
}; 

ve bileşen şablonu:

sizin amaçları için

<div> 
    <h1 data-bind="text: componentName"></h1> 
    <p>Foo is currently: <span data-bind="text: foo"></span></p> 
    <p>Bar is an array. It's values currently are:</p> 
    <ul data-bind="foreach: bar"> 
     <li data-bind="text: $data"></li> 
    </ul> 
    <form data-bind="submit: addToBar"> 
     <input type="text" 
       name="bar" 
       placeholder="Be witty!" 
       data-bind="attr: {id : componentName}, value : barValue" /> 
     <button type="submit">Add A Bar</button> 
    </form> 
    <h2>Central State</h2> 
    <p>The following components are currently signed in to Central State Service Provider</p> 
    <ul data-bind="foreach: CentralState.signedInComponents()"> 
     <li data-bind="text: $data"></li> 
    </ul> 
    <h2>Central Data</h2> 
    <p>The following information is available from Central Data Service Provider</p> 
    <table class="table table-bordered table-responsive table-hover"> 
     <tr> 
      <th>Component Name</th><th>Second Value</th> 
     </tr> 
     <!-- ko foreach: CentralData.dataWeRetrieved --> 
     <tr> 
      <td data-bind="text: firstName"></td><td data-bind="text: secondName"></td> 
     </tr> 
     <!-- /ko --> 
    </table> 
    <h3>End of Component One!</h3> 
</div> 

, sen Central devlet kuruluşu ve pseudo API'leri görmezden, ancak olarak yararlı bir model bulabileceği senin Uygulama daha karmaşık hale gelir.