KnockoutJS - 组件 - 多个实例

我有这个KnockoutJS组件，我需要在同一页上有多个实例。我遇到了不同实例似乎共享可观察属性的问题。所以如果其中一个textareas被更新，同一页面上的其他人也会被更新。KnockoutJS - 组件 - 多个实例

我试图在不同的textareas上设置唯一的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>' 
});

视图模型，完成后的模板将在外部文件。

如果我在上面放置了3-4个组件的实例，它似乎只是最后一个“有效”的实例。

试图谷歌这个问题了几个小时，但没有成功:(

希望有人能告诉我正确的方法！

来源

2016-05-19 Stellan Bergström

什么'params'你传球？例如：在您使用'this.notes = params.notes'的viewModel构造函数中。这意味着如果'params.notes'是传递给多个组件的可观察对象，它将是一个共享属性。 – user3297291

不同实例的标记看起来像这样（它是传递给notes/showNote的不同observable）。 http://pastebin.com/nvCxWPPb –

我并不完全确定有什么问题，但这就是我所指的：https://jsfiddle.net/t76722qu/请注意'text'在构造函数中被初始化，因此_unique_给每个组件_instance_。 'shared'通过'params'传递，因此被_all_组件共享。（尝试点击'true' /'false'来查看它对所有组件的改变） – user3297291

所以，大量的时间后，我找到了解决办法，我只好使用createViewModel工厂模式，如果不使用viewmodel将被用作单例实例，这是我的问题。我自己用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>' 
});

享受:)

来源

2016-05-20 12:19:01

KnockoutJS - 组件 - 多个实例

回答

相关问题