KnockoutJS - コンポーネント - 複数のインスタンス

Question

私は同じページに複数のインスタンスを持つ必要があるKnockoutJSコンポーネントを持っています。私は、異なるインスタンスが観察可能な特性を共有するように見えるという問題に遭遇した。したがって、テキストエリアの1つが更新されると、同じページの他のものも更新されます。

私はテストとして異なるテキストエリアにユニークなIDを設定しようとしましたが、それで解決できませんでした。

は、ここに私のコンポーネントのコードです：

ko.components.register('note-editor', { 
    viewModel: (params) => { 
     var self = this; 

     this.id = uid.new('note-editor-'); 
     this.title = ko.observable(params && params.title || ''); 
     this.titleClass = ko.observable(params && params.titleClass || ''); 
     this.expandTooltip = ko.observable(params && params.expandTooltip || ''); 
     this.numberOfCharactersLeft = ko.observable(params && params.numberOfCharactersLeft || ''); 
     this.limitCharacters = ko.observable(params && params.limitCharacters || 1000); 

     this.showNote = params.showNote; 
     this.notes = params.notes; 
     this.showIcon = ko.computed(() => { 
      return self.notes() != undefined && self.notes() != ''; 
     }); 
     this.notesCount = ko.computed(() => { 
      var value = self.notes(), 
       charLimit = self.limitCharacters(); 

      if (value) { 
       var characters = charLimit - value.length; 

       if (characters < 0) { 
        return 0; 
       } 

       return characters; 
      } 

      return charLimit; 
     }); 
    }, 
    template: '<div data-bind="text: title, attr: { class: titleClass }"></div>' 
    + '<div tabindex="1" data-bind="toggleButton: showNote, attr: { title: expandTooltip }" class="toggleButton"></div><img data-bind="visible: showIcon" src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" style="margin-bottom: -7px" />' 
    + '<div class="note-counter" data-bind="visible: showNote, style: { fontWeight: notesCount() == 0 ? \'bold\' : \'\' }">' 
    + '<span data-bind="text: notesCount()" > </span><span data-bind="text: numberOfCharactersLeft"></span>' 
    + '</div>' 
    + '<textarea data-bind="visible: showNote, value: notes, valueUpdate: [\'input\', \'afterkeydown\'], limitCharacters: limitCharacters, attr: { id: id, name: id }" tabindex="1"></textarea>' 
}); 

のviewmodelし、終了時にテンプレートが外部ファイルになります。

上記のコンポーネントのインスタンスを3〜4個配置すると、それが「動作する」最後のインスタンスにしか見えません。

は、時間のカップルのためのこの問題をGoogleにしようとしましたが、ない成功:(

ホープ誰かが私に適切なアプローチを表示することができます！

Answer 1

をので、数多くの時間後、私は解決策を見つけた。私が持っていましたモデルを使用しない場合はビューモデルがシングルトンインスタンスとして使用され、それは私の問題でした。 createViewModelファクトリパターンを使用しています。

とにかく、それは解決していますので、私は答え:)

function noteViewModel(params) { 
    var self = this; 

    self.id = uid.new('note-editor-'); 
    self.title = ko.observable(params && params.title || ''); 
    self.titleClass = ko.observable(params && params.titleClass || ''); 
    self.expandTooltip = ko.observable(params && params.expandTooltip || ''); 
    self.numberOfCharactersLeft = ko.observable(params && params.numberOfCharactersLeft || ''); 
    self.limitCharacters = ko.observable(params && params.limitCharacters || 1000); 

    self.showNote = params.showNote; 
    self.editorNotes = params.notes; 

    self.showIcon = ko.computed(() => { 
     return self.editorNotes() != undefined && self.editorNotes() != ''; 
    }); 

    self.notesCount = ko.computed(() => { 
     var value = self.editorNotes(), 
      charLimit = self.limitCharacters(); 

     if (value) { 
      var characters = charLimit - value.length; 

      if (characters < 0) { 
       return 0; 
      } 

      return characters; 
     } 

     return charLimit; 
    }); 
} 

ko.components.register('note-editor', { 
    viewModel: (params) => { 
     createViewModel: return new noteViewModel(params); 
    }, 
    template: '<div data-bind="text: title, attr: { class: titleClass }"></div>' 
    + '<div tabindex="1" data-bind="toggleButton: showNote, attr: { title: expandTooltip }" class="toggleButton"></div><img data-bind="visible: showIcon" src="https://placeholdit.imgix.net/~text?txtsize=5&txt=30%C3%9730&w=20&h=20" style="margin-bottom: -7px" />' 
    + '<div class="note-counter" data-bind="visible: showNote, style: { fontWeight: notesCount() == 0 ? \'bold\' : \'\' }">' 
    + '<span data-bind="text: notesCount()" > </span><span data-bind="text: numberOfCharactersLeft"></span>' 
    + '</div>' 
    + '<textarea data-bind="visible: showNote, value: editorNotes, valueUpdate: [\'input\', \'afterkeydown\'], limitCharacters: limitCharacters, attr: { id: id, name: id }" tabindex="1"></textarea>' 
}); 

はあなたが渡している何 `params` :)