Наблюдаемый массив Knockout.js с событием onlick

Question

Наблюдаемый массив Knockout.js с событием onlick

0

Привет, у меня есть веб-приложение, я очень новичок в KnockOut.js

У меня есть JS COde

ko.applyBindings(new LOBViewModel());
//COMMENTED SECTION BINDS THE DATA TO HTML, BUT DOES NOT TRIGGER ONLICK EVENT
//function LOBViewModel() {
//    var self = this;

//    self.vm = {
//        LOBModel: ko.observableArray()
//    };

//    GetLOB();
//
//    self.DeleteRecord = function (lobmodel) {
//        $.ajax({
//            type: "POST",
//            url: '/Admin/DeleteLOB',
//            data : {LOB_ID : lobmodel.LOB_ID},
//            success: function (data)
//            {
//                alert("Record Deleted Successfully");
//                GetLOB();//Refresh the Table
//            },
//            error: function (error)
//            {
//            }
//        });

//    };
//    function GetLOB() {
//        $.ajax({
//            url: '/Admin/GetLOB',
//            type: "POST",
//            dataType: "json",
//            success: function (returndata) {
//                self.vm.LOBModel = returndata;
//                ko.applyBindings(self.vm);
//                alert("Hello");

//            },
//            error: function () {
//            }
//        });
//    };
//}
//UNCOMMENTED SECTION DOES NOT BIND THE DATA TO HTML
function LOBViewModel() {
    var self = this;
self.LOBModel = ko.observableArray([]);  

GetLOB();

self.DeleteRecord = function (lobmodel) {
    $.ajax({
        type: "POST",
        url: '/Admin/DeleteLOB',
        data: { LOB_ID: lobmodel.LOB_ID },
        success: function (data) {
            alert("Record Deleted Successfully");
            GetLOB();//Refresh the Table
        },
        error: function (error) {
        }
    });

};

function GetLOB() {
    $.ajax({
        url: '/Admin/GetLOB',
        type: "POST",
        dataType: "json",
        success: function (returndata) {
            self.LOBModel = returndata;
            alert(self.LOBModel.length);
        },
        error: function () {
            alert("eRROR GET LOB");
        }
    });
};

}

Подробности My Json находится в следующем формате [0] => {LOB_ID: 0, LOB_Name: "data" LOB_description: "data"} [1] => и т.д.

Файл HTML

        <tbody data-bind="foreach: LOBModel">
        <tr>
            <td data-bind="text:LOB_ID"></td>
            <td data-bind="text: LOB_Name"></td>
            <td data-bind="text: LOB_Description"></td>
            <td><button data-bind="click: $root.DeleteRec">Delete</button></td>

        </tr>
    </tbody>

Мой вопрос:

почему это

я должен использовать vm для привязки json к LOADModel, чтобы он работал, когда я использую self.LOBModel = ko.observableArray([]); привязки не происходит. т.е. моя таблица не загружает данные.
мой Onlick не запускается в обеих версиях кода, я пробовал self.DeleteRec, $root.DeleteRec and just DeleteRec. Хотя кажется очень очевидным, это просто не работает.
Будет ли DeleteRec знать, какую запись я удаляю. lobmodel.LOB_ID правильный способ использования?

Ronak Jain 09 янв. 2014, в 12:22

Источник

Теги:

javascript

jquery

json

knockout.js

1 ответ

Ещё вопросы

Hans Roerdinkholder · Accepted Answer · 2014-01-09T10-19-00.000Z

Чтобы ответить на вопрос по пунктам:

(1) Ваша проблема в функции GetLOB, в этой строке:

self.LOBModel = returndata;

При этом вы перезаписываете self.LOBModel = ko.observableArray([]). Вместо этого вы должны сделать следующее:

self.LOBModel(returndata);

Затем вы должны увидеть данные в своей таблице (если у вас нет других ошибок). Здесь следует помнить, что если вы делаете переменную наблюдаемой, вам всегда нужно использовать() -syntax для чтения или записи базового значения. Если вы используете = вместо этого, вы удаляете наблюдаемую функциональность.

(2) подход с "$ root.DeleteRecord" верен. "self.DeleteRecord" не будет работать, и ни один из них не будет просто DeleteRecord. То, что также будет работать, - $ parent.DeleteRecord. Кажется, проблема заключается в том, что вместо "DeleteRecord" вы выполняете "DeleteRec".

(3) ваш подход является правильным. Удалили мои комментарии по этому поводу, так как Ричард Далтон под мной сделал правильный комментарий, который делает недействительным то, что я набрал здесь.

Изменение: рабочий скрипт http://jsfiddle.net/LFgUu/4/

Хороший ответ, кроме 3 - «При вызове вашего обработчика Knockout предоставит текущее значение модели в качестве первого параметра». - knockoutjs.com/documentation/click-binding.html
Ты прав. Отредактировал мой ответ.
с помощью self.LOBModel(returndata); Я получаю длину как 0, где, как с помощью self.LOBModel = returndata; я получаю длину как 4. но в обоих случаях мой KnockOut не привязывает данные к таблице. Любая подсказка, что случилось, я очень долго ломал голову.
Вы делаете ту же ошибку в строке длины: self.LOBModel.length должно быть self.LOBModel (). Length. Что касается таблицы: вы получаете какие-либо ошибки в консоли?
Привет, self.LOBModel (). Длина действительно дает мне 4. Я не получаю ошибки в консоли, учитывая это json [{"LOB_ID": 12, "LOB_Name": "asdasdd", "LOB_Description": "asdasddasasd"}, { "LOB_ID": 21, "LOB_Name": "ODIN", "LOB_Description": "ODIN"}, { "LOB_ID": 22, "LOB_Name": "Asdasd", "LOB_Description": "sadsdadad"}, {» LOB_ID ": 11," LOB_Name ":" LG "," LOB_Description ":" Руководит поколениями "}]
Я создал скрипку, и после изменения большого количества кода оказалось, что вам нужно разместить теги <table> </ table> вокруг <tbody>. Отредактировано первое сообщение, чтобы включить ссылку Fiddle.
Это не было проблемой, я не использовал document.load, поэтому моя таблица не смогла загрузить данные. Любыми способами спасибо за вашу помощь. твоя скрипка помогла мне понять мою ошибку. Благодаря тонну.