调用 knockoutjs viewmodel 函数答案

【问题标题】：calling knockoutjs viewmodel functions调用 knockoutjs viewmodel 函数
【发布时间】：2016-12-29 13:22:48
【问题描述】：

这里是为了更好理解的上下文：

我的主页中有一个数据网格，每行都有一个按钮。当用户点击它时，它会通过 ajax jquery 加载另一个页面并在引导模式对话框中弹出它：

<script>
var sharedadminID = 0;
var alreadyloaded = 0;
...
    function EditClick(args) {
            var gridObj = $("#DetailsGrid").data("ejGrid");
            var data = gridObj.getSelectedRecords()[0].ID;
            sharedadminID = data;
            $("#prdmodalbody").load("pages/modals/AddEditPRD.html");
}
</script>

AddEditPRD.html 页面的视图模型是这样定义的

<script>

        var PRDVM = function () {
            ID = ko.observable();
            DESIGNATION = ko.observable();
            PRIX = ko.observable();

            loadproduct = function () {
                alert("innerloadproduct2222");
                jQuery.ajax({
                    url: "/Admin/GetProduct?i=" + sharedadminID,
                    success: function (html) {

                        ID = html.ID,
                        DESIGNATION = html.DESIGNATION,
                        PRIX = html.PRIX                      
                    },
                    async: false
                });
            }
            loadproduct();
        };

        $(document).ready(function () {

            if (alreadyloaded == 0) {
                VM = new PRDVM();
                ko.applyBindings(VM,        document.getElementById("#prdmodalbody"));
                alreadyloaded = 1;
            }
            else
                VM.loadproduct();
        });

    </script>

当我第一次点击按钮时它会起作用，但在那之后就不行了。

控制台上没有错误，并且似乎没有触发 loadproduct 函数除了第一次。

欢迎任何帮助

【问题讨论】：

标签： knockout.js viewmodel

【解决方案1】：

您的代码中有很多个问题点：

（过度）使用全局变量；
尴尬的格式（难以阅读和调试，但也难以为您提供帮助）；
同步 ajax 调用（为什么？这很少是个好主意，如果稍后将其更改为异步，可能会再次破坏整个事情）；
你用ID = html.ID覆盖可观察的属性；
语法错误/问题，使用 , 你打算 ;
根本不公开可观察对象：如果不公开它们，任何代码应该如何“看到”ID 等等？
alreadyloaded sortoff 的组合用作布尔值，而它是一个数字（与== 比较，而不是更安全的===）
为什么在ready 回调中执行if...else 根本？无论如何都应该调用一次...

解决所有这些问题，您很可能会找到问题的根本原因。

【讨论】：

observable被正确暴露和绑定，并随着ajax调用结果更新，每次点击父页面的编辑按钮都会调用ready函数
无论如何我主要关心的是知道为什么 loadproduct 方法只在第一次被触发。谢谢
不，它们不是，您帖子中的observable 变量（如ID）在视图模型构造函数实例之外不可见。 The other answer 清楚地显示了差异，因为确实使用 self = this 成语公开它们。

【解决方案2】：

我认为这种剔除和 DOM 操作的混合是有问题的...您可以在更纯粹的剔除解决方案中做到这一点。

话虽如此，我认为问题在于您如何修改数据...您必须通过将它们包装在括号中来更新可观察对象，否则淘汰赛不会更新视图，尽管它会与非执行“一次性”绑定- 可观察的数据。使用作用域变量（如 self）跟踪它也是一个好习惯，这样您就不会在不同的上下文中遇到奇怪的作用域问题：

    var PRDVM = function () { 
        var self = this;
        self.ID = ko.observable();
        self.DESIGNATION = ko.observable();
        self.PRIX = ko.observable();

        self.loadproduct = function () {
            alert("innerloadproduct2222");
            jQuery.ajax({
                url: "/Admin/GetProduct?i=" + sharedadminID,
                success: function (html) {

                    self.ID(html.ID);
                    self.DESIGNATION(html.DESIGNATION);
                    self.PRIX(html.PRIX);                      
                },
                async: false
            });
        }
        self.loadproduct();
    };

    $(document).ready(function () {

        if (alreadyloaded == 0) {
            VM = new PRDVM();
            ko.applyBindings(VM,        document.getElementById("#prdmodalbody"));
            alreadyloaded = 1;
        }
        else
            VM.loadproduct();
    });

【讨论】：