2

我有一个引导模式，其中包含用于更新或创建实体的表单（在我的示例中为公司）。现在我的问题是，如果我使用模式查看实体，当我以任何方式关闭模式时，它不会清除字段。如果我然后单击“创建”按钮，导致表单仍然被填充，这应该会给我带来一个空白模式。

如何仅从常规 javascript 执行我的 ViewModels 方法之一？这是我的一些代码：

function ViewModel() {
        var self = this;

       function CompanyViewModel(company) {
            var self = this;
            self.Id = company.CompanyId;
            self.Name = company.Name;
        }

        function BlankCompanyViewModel() {
            var self = this;
            self.Id = 0;
            self.Name = "";
        }

        self.company = ko.observable();
        self.companies = ko.observableArray();


        self.clearCurrentCompany = function() {
            self.company(new BlankCompanyViewModel());
        };

       // Initialize the view-model
        $.getJSON("/api/company", function(companies) {
            $.each(companies, function(index, company) {
                self.companies.push(new CompanyViewModel(company));
            });
            self.clearCurrentCompany();
        });
    }

理想情况下，我想在模态的“隐藏”事件上运行 ViewModel.clearCurrentCompany，如下所示：

 $('#myModal').on('hidden', function() {
       //Do something here, not sure what
    });
4

2 回答 2

4

我喜欢在模式周围使用自定义绑定，使其基于填充/清除 observable 来打开/关闭/显示。

就像是：

ko.bindingHandlers.modal = {
    init: function(element, valueAccessor, allBindings, vm, context) {
        var modal = valueAccessor();
        //init the modal and make sure that we clear the observable no matter how the modal is closed
        $(element).modal({ show: false, backdrop: 'static' }).on("hidden.bs.modal", function() {
            if (ko.isWriteableObservable(modal)) {
                modal(null);
            }
        });

        //apply the template binding to this element
        ko.applyBindingsToNode(element, { with: modal }, context);

        return { controlsDescendantBindings: true };
    },
    update: function(element, valueAccessor) {
        var data = ko.utils.unwrapObservable(valueAccessor());
        //show or hide the modal depending on whether the associated data is populated
        $(element).modal(data ? "show" : "hide");
    }
};

然后，您将其用于可观察对象。它的作用类似于with对该可观察对象的绑定，并根据可观察对象是否已填充来显示/隐藏模式。

这是一个示例，它显示了它的使用情况并设置了一个订阅，您可以在模式关闭时在其中运行自定义代码。 http://jsfiddle.net/rniemeyer/uf3DF/

于 2013-05-15T19:44:49.480 回答
2 
function ViewModel() {
    var self = this;
    // your previous code
    $('#myModal').on('hide', function() {
       self.clearCurrentCompany();
    });
}

就这样。请注意，您要隐藏，而不是隐藏，因为隐藏仅在模式完全消失后才会触发。如果用户在前一个视图关闭之前打开创建，它仍然会被填充。

于 2013-05-15T19:25:13.533 回答