ノックアウト自動完了

Question

私は、SPサービスライブラリを使用してSharePoint 2010プロジェクトでknockout jsを使用しています。私はフィールドのいずれかのオートコンプリート機能を実装しようとしています。ここに私のコードは次のとおりです。

<input id="newTask" title="task" data-bind="value: newTask" placeholder="Add new task" /> 
<button data-bind="click: addTask" class="btn"> 

これは私のViewModel.jsです：

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#newTask').on('input propertychange paste', function (e) { 
     var val = $(e.currentTarget).val(); 
     viewModel.newTask(val); 
    }); 

    // Init 
    viewModel = new taskListViewModel(); 
    ko.applyBindings(viewModel, document.getElementById("parent-container")); 

    $().SPServices.SPAutocomplete({ 
     sourceList: "Bidders", 
     sourceColumn: "Title", 
     columnName: "task", 
     ignoreCase: true, 
     numChars: 3, 
     slideDownSpeed: 1000, 
     debug: true 
    }); 
}); 
</script> 

：私のView.htmlファイルから

(function() { 
function Task(data) { 
    this.Tasks = ko.observable(data.Tasks); 
    /*other fields*/ 
} 
function TaskListViewModel() { 
    var ctx = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);  
    var web = ctx.get_web(); 
    var taskList = web.get_lists().getByTitle("Tasks");  
    // Data 
    var self = this; 
    self.taskInformation = ko.observableArray([]); 
    self.newTask = ko.observable(); 
    /*other fields*/ 
    self.addTask = function() { 
     self.taskInformation.push(new Task(
      { 
       Tasks: this.newTask(), 
       /*other fields*/ 
       })); 
      self.newTask(""); 
    }; 

var taskListViewModel; 

$(document).ready(function() { 
    EnsureScriptFunc("sp.js", "SP.ClientContext", function() { 
    taskListViewModel = new TaskListViewModel(); 
    ko.applyBindings(taskListViewModel); 
    }); 
}); 
})(); 

このスクリプト私の入力フィールドがどのように見えるか

この

自動補完機能は新しく追加されたタスクは、入力された文字のみを使用します。例：マイクと入力すると（オートコンプリートはマイクロソフトのオプションです）、このオプションを選択して[追加]をクリックすると、マイクのみが使用されます。

Answer 1

私は私のinput要素

<input data-bind="textInput: task, valueUpdate:'blur'"/> 

上でこれを作ったのだが、唯一のIE11で、動作します。私のクライアントは、つまり、私はこのアプローチに満足しています。

Answer 2

手動で入力をトリガーして、入力が操作されたことをノックアウトに伝える必要があります。

<input id="newTask" title="task" data-bind="value: newTask" placeholder="Add new task" /> 

$('#newTask').on('input propertychange paste', function (e) { 
    var val = $(e.currentTarget).val(); 
    viewModel.newTask(val); 
}); 

// Init 
viewModel = new TaskList(); 
ko.applyBindings(viewModel , document.getElementById("parent-container")); 

さらに編集

var _taskList; 
$(document).ready(function() { 
    EnsureScriptFunc("sp.js", "SP.ClientContext", function() { 
     _taskList = new TaskListViewModel(); 
     ko.applyBindings(_taskList); 
    }); 
    $('#newTask').on('input propertychange paste', function (e) { 
     var val = $(e.currentTarget).val(); 
     _taskList.newTask(val); 
    }); 
}); 

Answer 3

あなたが結合valueを使用しているので、観察可能な値だけぼかしにビューモデルに更新されます。 KO 3.2+を使用している場合は、textInputバインディングを使用する必要があります。このバインディングは、observableを直ちに更新します。

アップグレードしていない場合は、アップグレードを検討する必要があります。私が見つけたのは、tyler_mitchellというjQueryイベントを使用すると、私が望むほど信頼性が高くないことが分かりました。しかし、あなたがアップグレードしていない場合、それは行く方法です。