Question

<input data-bind="value:ServicingSelected" class='t1' type='text'
 name='tags' data-role='tagsinput' placeholder='Add tags' />

此处ServicingSelected是observablearray，用于保存当前所选项目以查看记录。

$(document).ajaxComplete(function () {
           $('.t1').tagsinput({
               maxTags: 3
           });
       });

现在它在视图记录上正确显示所选选项。但Typahead的源代码一直保存在视图模型中的类似observabearray中。

但是不知道如何将其设置为bootstrap标签输入的预先输入的数据源

我使用以下链接进行参考。 http://timschlechter.github.io/bootstrap-tagsinput/examples/

标签输入字段位于表格内

 <table style="width: 100%" class="table table-striped" 
   data-bind="triggerUpdate: MatchDetails">

Answer 1

在标签输入文档中，作者使用预取和远程json：

var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: 'assets/citynames.json',
    filter: function(list) {
      return $.map(list, function(cityname) {
        return { name: cityname }; });
    }
  }
});
citynames.initialize();

$('input').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

但是，在typeahead.js docs中，我们可以看到local参数可用：

// constructs the suggestion engine
var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: $.map(states, function(state) { return { value: state }; })
});

// kicks off the loading/processing of `local` and `prefetch`
states.initialize();

$('#bloodhound .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  displayKey: 'value',
  // `ttAdapter` wraps the suggestion engine in an adapter that
  // is compatible with the typeahead jQuery plugin
  source: states.ttAdapter()
});

所以你可以使用

local: myObservableArray().map(function(tag) { return { value: tag }; })

但是，如果你需要在observableArray执行时更新typeahead，你可能需要通过再次初始化插件来重新连接。

您可以使用subscription：http://knockoutjs.com/documentation/observables.html#explicitly-subscribing-to-observables

完成此操作

myObservableArray.subscribe(function() {
    setupTypeahead();
});

如何设置bootstrap tagsinput typeahead datasource为ko observablearray

1 个答案: