Question

在项目上工作以获得使用knockoutJS构建的CRUD系统，我从AJAX调用中获取数据。目前仍在处理添加和删除功能，但目前我的模态存在问题。它似乎显示出我的模态形式，甚至看起来似乎正在尝试。它似乎给我带来了任何错误。

我在这个jsfiddle http://jsfiddle.net/rqwku4kb/28/中复制了这个问题。我已经好几次查看了代码，但我不太确定问题出在哪里。我仔细检查了我的bootstrap，jquery和knockout是否正确加载。

有人知道我失踪了吗？

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });

        var value = valueAccessor();
        if (typeof value === 'function') {
            $(element).on('hide.bs.modal', function() {
               value(false);
            });
        }
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
           $(element).modal("destroy");
        });

    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');

        } else {
            $(element).modal('hide');
        }
    }
}

/* global ko, $ */
function Incident(data) {
    var self = this;
    self.ID = data.ID;
    self.Description = ko.observable(data.Description);
    self.Incident = ko.observable(data.Incident);
    self.Composante = ko.observable(data.Composante);
    self.available_composante = ko.observableArray(["A","B","C","D","E"]);
        self.chosen_composante = ko.observableArray();
}

Incident.BASE_URL = '../../../../_vti_bin/listData.svc/PROD_Incidents';
Incident.CREATE_HEADERS = {
    "accept": "application/json;odata=verbose"
};
Incident.UPDATE_HEADERS = {
    "accept": "application/json;odata=verbose",
    "If-Match": "*"
};

Incident.prototype.save = function() {
    var id = this.ID,
        url = Incident.BASE_URL + (id ? '(' + encodeURIComponent(id) + ')' : '');

    return $.ajax(url, {
        type: id ? "MERGE" : "POST",
        data: ko.toJS({
            Description: this.Description,
            Incident: this.Incident
        }),
        processData: false,
        contentType: "application/json;odata=verbose",
        headers: id ? Incident.UPDATE_HEADERS : Incident.CREATE_HEADERS,
    });
};

function IncidentList(data) {
    var self = this;
    self.incidents = ko.observableArray();
    self.currentIncident = ko.observable();
    self.showDialog = ko.observable(false);

    self.ShowMeTheCurrentSelectedIncident = function(data) {
        self.currentIncident();
        data.chosen_composante.push(data.Composante);
        self.showDialog(true);  
    };

    self.clearCurrentIncident = function() {
        self.currentIncident(null);
    };

    // list filter & automatic loading
    self.filter = ko.observable("");
    self.orderby = ko.observable("");
    self.params = ko.computed(function() {
        return ko.toJS({
            $filter: self.filter,
            $orderby: self.orderby
        });
    }).extend({
        rateLimit: 100
    });
    self.params.subscribe(self.load, self);

    // let inital load happen immediately
    self.params.notifySubscribers();
}

IncidentList.prototype.load = function(params) {
    var self = this;
    return $.get(Incident.BASE_URL, params).then(function(data) {
        if (data.d.results) {
            self.incidents(data.d.results.map(function(item) {
                return new Incident(item);
            }));
        } else {
            console.log("no results received from server");
        }
    }).fail(function() {
        console.log("error", arguments);
    });
};

// viewmodel setup
var vm = new IncidentList();
vm.filter("ÉtatValue ne 'Fermé'");
vm.orderby("PrioritéValue desc");

// binding when document is ready
$(function() {
    ko.applyBindings(vm);
});

// Ajax mockup
$.mockjax({
    url: Incident.BASE_URL,
    contentType: "application/json;odata=verbose",
    responseText: {
        d: {
            results: [{
                ID: "123",
                Description: "The server x is unavailable",
                Incident: "1234",
                Composante: "A, "
            }, {
                ID: "124",
                Description: "The router located downtown is down",
                Incident: "12345",
                Composante: "B"
            }, {
                ID: "125",
                Description: "Fiber optic cable downtown is flapping",
                Incident: "123456",
                Composante: "C"
            }, {
                ID: "126",
                Description: "Network unvailable at the beaver site",
                Incident: "1234567",
                Composante: "D"
            }]
        }
    }
});

Answer 1

如上所述Jeroen，您应该像这样设置currentIncident：

self.ShowMeTheCurrentSelectedIncident = function(data) {
 self.currentIncident(data);
 data.chosen_composante.push(data.Composante);
 self.showDialog(true); 
};

请参阅更新：http://jsfiddle.net/rqwku4kb/29/

KNockoutJS - Bootstrap模式无法正确加载

1 个答案: