Question

我编写了以下自定义绑定处理程序，它显示了一个jquery-ui自动完成列表。选择元素后，我想更改由options.value给出的给定可观察值，但是当select函数进入时没有变化。

ko.bindingHandlers.autocomplete = {
    init : function(element, valueAccessor, allBindings, viewModel, bindingContext) {

        var options = ko.unwrap(valueAccessor());               

        $(element).autocomplete(
                {
                    minLength : 2,
                    autoFocus : true,
                    source : function(request, response) {
                        $.ajax({
                            url : options.source,
                            data : {
                                term : request.term
                            },
                            dataType : "json",
                            type : "GET",
                            success : function(data) {
                                response(data);
                            }
                        });
                    },
                    select : function(event, ui) {
                        var selectedItem = ui.item;
                        options.value(selectedItem.name);
                    }
                });
    }
};

<input data-bind="autocomplete: { 
    value: myView().parent_name,
    source: '/data/autocomplete'
}" 
type="text" class="form-control">

修改1

我尝试了评论中的绑定，但我仍有问题。

model.autocomplete = function(searchTerm, callback){
    $.ajax({
        type : "GET",
        url : "/data/autocomplete",
        data: {term: searchTerm}
    }).done(callback);
};

输入如下：

    <input data-bind="jqAuto: { 
        value: myView().parent_name,
        source: myView().autocomplete,
        labelProp: 'name',
        valueProp: 'parent_name'
    }" 
    type="text" class="form-control">

这不会改变myView（）。parent_name

修改2

我想我知道现在的问题是什么。我制作了一个更简单的测试文件，如下所示：

 <!DOCTYPE html>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script>

<h1>Testpage</h1>
<input data-bind="jqAuto : {
        source: sub().autocomplete,
        value: sub().id,
        labelProp: 'name',
        valueProp: 'id'
    }"></input>
<button data-bind="click: sub().output">ok</button>
<button data-bind="click: reset">reset</button>

<script>
function getData() {
    var data = [
        {
            name: "Test1",
            id: 1
        },
        {
            name: "Test2",
            id: 2
        },{
            name: "Test3",
            id: 3
        }       
    ];
    return data;
}

function Submodel() {
    var self = this;

    self.name = ko.observable("");
    self.id = ko.observable(null);

    self.autocomplete = function(searchTerm, callback) {
        callback(getData());
    };

    self.output = function(){
        alert(self.id());
    };
}

function PageModel() {
    var self = this;

    self.sub = ko.observable(new Submodel());

    self.reset = function(){
        self.sub(new Submodel());
    };
}

ko.applyBindings(new PageModel());
</script>

</body>
</html>

有一个子模型在某些时候被清除，但这似乎使绑定无效。直到我按下重置按钮，一切正常。有什么解决方案可以在重置后更新绑定。我需要这个重置，因为我想在不使用对话框绑定的情况下使用模型对话框而不用手工清理每个变量。

Answer 1

根据您提供的（最小）代码以及您在评论中对我的问题的回答，我可以通过展示一个有效的示例来提供帮助。

最重要的要点：

您必须仔细阅读valueProp，inputProp和labelProp之间的差异：它们用于定义您希望存储在视图模型中的内容< / em>与您希望向用户显示的内容。

确保您的autocomplete方法返回的数据具有您指定的道具

尝试示例的注释：

我没有包含css，所以它很难看

我已将字符串"one"用于"ten"作为示例数据。输入o或e或这些字词中使用的任何其他字母即可开始使用。

＆＃13;
＆＃13;
var Model = function() { return { parent_name: ko.observable(null), autocomplete: function(searchTerm, callback) { setTimeout(function() { callback(getData().filter(function(v) { return v.name.includes(searchTerm.toLowerCase()) })); }, 200); } }; }; var vm = { myView: ko.observable(new Model()), reset: () => vm.myView(new Model()) }; ko.applyBindings(vm); function getData() { return ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"] .map(str => ({ name: str })); };
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://rawgithub.com/rniemeyer/knockout-jqAutocomplete/master/build/knockout-jqAutocomplete.js"></script> <p> <code>parent_name</code>’s value is: <strong> <code data-bind="text: JSON.stringify(myView().parent_name())"></code> </strong> </p>  <input data-bind="jqAuto: { value: parent_name, source: autocomplete, labelProp: 'name', valueProp: 'name' }" type="text" class="form-control">  <button data-bind="click: reset">reset</button>
＆＃13;
＆＃13;
＆＃13;

在自定义处理程序中更改模型observable

1 个答案: