个人中心
gpt4 book ai didi

javascript - 更改自定义处理程序内可观察的模型

转载 作者：行者123 更新时间：2023-12-03 05:16:23 25 4
gpt4 key购买 nike

我编写了以下自定义绑定(bind)处理程序，它显示了 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

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

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>

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

最佳答案

根据您提供的(最小)代码以及您在评论中对我的问题的回答，我可能可以通过展示一个工作示例来提供帮助。

最重要的要点:

  • 您必须仔细阅读 valueProp、inputProp 和 labelProp 之间的差异:它们用于定义您想要的< em>存储在 View 模型中与您想要向用户显示的内容。
  • 确保您的自动完成方法返回的数据具有您指定的属性

尝试示例的注意事项:

  • 我没有包含 css，所以很难看
  • 我使用了字符串 "one" 到 "ten" 作为示例数据。输入 o 或 e 或这些单词中使用的任何其他字母即可开始。

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 }));
};
<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>


<!-- ko with: myView -->
<input data-bind="jqAuto: { 
        value: parent_name,
        source: autocomplete,
        labelProp: 'name',
        valueProp: 'name'
    }" type="text" class="form-control">
<!-- /ko -->

<button data-bind="click: reset">reset</button>

关于javascript - 更改自定义处理程序内可观察的模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41593362/

25 4 0
文章推荐： javascript - 单击事件期间更改的复选框值未被表单数据拾取
文章推荐： javascript - Pubnub - 历史 API 问题
文章推荐： javascript - 过滤组合中的服务器端选项
文章推荐： Javascript 停止并播放不同的声音
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com