Kombination von BootstrapTable mit KnockoutJS zur Implementierung von Hinzufügungs-, Lösch-, Änderungs- und Abfragefunktionen [1]_Javascript-Kenntnisse

Bootstrap ist ein Front-End-Framework, das Webentwicklern viele Vorteile bietet. Die Benutzeroberfläche ist sehr hochwertig und edel. Theoretisch ist es nicht erforderlich, eine CSS-Zeile zu schreiben. Fügen Sie dem Tag einfach die entsprechenden Attribute hinzu.

KnockoutJS ist ein in JavaScript implementiertes MVVM-Framework. Sehr cool. Nachdem beispielsweise die Listendatenelemente hinzugefügt oder gelöscht wurden, ist es nicht erforderlich, das gesamte Kontrollfragment zu aktualisieren oder JS selbst zu schreiben, um Knoten hinzuzufügen oder zu löschen. Sie müssen lediglich die Vorlage und Attribute vordefinieren, die ihrer Syntax entsprechen Definition. Einfach ausgedrückt müssen wir uns nur auf den Datenzugriff konzentrieren.

1. Einführung in Knockout.js

1. Knockout.js und MVVM

Heutzutage muss ich bedauern, dass es als Programmierer wirklich schwierig ist, endlose Technologien zu erlernen. es sei denn, du verwandelst dich! Das Meer des Leidens ist grenzenlos, es liegt an Ihnen, zu entscheiden, ob Sie umkehren wollen oder nicht!

Knockout.js ist ein leichtes Front-End-Framework, das auf dem MVVM-Muster basiert. Wie leicht ist es? Laut der neuesten Version v3.4.0, die auf der offiziellen Website gezeigt wird, sind es nur 22 KB. Es kann die Bindung von Datenmodell und Schnittstellen-DOM auf benutzerfreundliche Weise handhaben. Das Wichtigste ist, dass die Bindung in beide Richtungen erfolgt, was bedeutet, dass sich auch die Daten im Schnittstellen-DOM entsprechend ändern Wenn sich wiederum die Daten in der Datenbank ändern, reagiert auch das Datenmodell auf diese Änderung. Dies kann die Menge unseres Front-End-Codes erheblich reduzieren und die Wartung unserer Schnittstelle vereinfachen. Wir müssen nicht mehr viele Ereignisüberwachungsdatenmodelle und Schnittstellen-DOM-Änderungen schreiben. Der folgende Blogger wird diese beiden Punkte anhand eines Anwendungsbeispiels veranschaulichen.

Offizielle Website von Knockout.js: http://knockoutjs.com

Open-Source-Adresse von Knockout.js: https://github.com/knockout/knockout

MVVM-Muster: Dies ist ein Entwurfsmuster zum Erstellen von Benutzeroberflächen. MVVM unterteilt es in drei Teile: Model, View und ViewModel ist das Datenmodell, View ist unsere Ansicht und ViewModel ist ein Ansichtsmodell, das für die Bindung verwendet wird. DOM-Elemente über dem Datenmodell und der Ansicht. Wenn Sie WPF und Silverlight verwendet haben, sollte es kein Problem sein, dies zu verstehen. Wenn Sie dies nicht getan haben, spielt es keine Rolle. Nachdem Sie diesen Artikel gelesen haben, werden Sie ein allgemeines Verständnis haben.

2. Das einfachste Beispiel

Wenn Sie Knockout.js von Grund auf verwenden, benötigen Sie Folgendes: mindestens die folgenden vier Schritte ausführen

2.1, Gehen Sie zur offiziellen Website, um die Datei knockout.js herunterzuladen, und zitieren Sie sie dann auf der Ansichtsseite.

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

Hinweis: knockout.js erfordert keine Unterstützung von jquery. Wenn Ihr Projekt jquery-bezogene Vorgänge verwenden muss, verweisen Sie andernfalls nur auf jquery oben Einfach ablegen.

2.2, Definition ViewModel

Was ist Viewmodel? Tatsächlich sieht es in js wie ein JSON-Objekt aus. Wir definieren ein Ansichtsmodell:

var myViewModel = {
Name: "Lilei",
profession: "软件工程师",
};

2.3, definieren Sie die Bezeichnung der Bindungsdatenbindung in der Ansichtsansicht

<div> 
姓名：<label data-bind="text:Name"></label><br />
职业：<input type="text" data-bind="textinput:Profession" />
</div>

Hinweis: Der dem Eingabe-Tag entsprechende Text muss eine Texteingabe verwenden, während der Text des normalen Tags Text sein kann.

2.4. Bindung aktivieren

Nach Abschluss der oben genannten drei Schritte müssen Sie auch die Bindung von Knockout aktivieren

ko.applyBindings(myViewModel);

Durch diese vier Schritte wird grundsätzlich die einfachste Viewmodel-Datenbindung implementiert.

Wenn Sie vorsichtig genug sind, werden Sie feststellen, dass die Methode ko.applyBindings() zwei Parameter hat. Der erste ist das Ansichtsmodell, das wir binden müssen. Aus ko.applyBindings(myViewModel); können wir ersehen, dass der zweite Parameter ein optionaler Parameter ist, der den Umfang der an das Ansichtsmodell gebundenen Bezeichnung darstellt. Wir ändern beispielsweise den obigen Code:

<div> 
姓名：<label id="lb_name" data-bind="text:Name"></label><br />
职业：<input type="text" data-bind="textinput:Profession" />
</div> 
ko.applyBindings(myViewModel,document.getElementById("lb_name"));

Es ist ersichtlich, dass der zweite Parameter den Umfang von myViewModel einschränkt, das heißt, er wird nur wirksam, wenn er mit der ID = „lb_name“ an das Tag gebunden ist Der Parameter ist ein Div-Container-Tag. Er gibt an, dass der Gültigkeitsbereich der Bindung alle Untertags unter dem Div umfasst.

3. Überwachungseigenschaften

Bis zu den oben genannten vier Schritten können wir keine Wirkung erkennen, sondern nur Welchen Sinn hat es, die Daten eines JSON-Objekts an das HTML-Tag zu binden? Verkompliziert es nicht ein einfaches Problem? Machen Sie sich keine Sorgen, erleben Sie das Wunder jetzt! Wie oben erwähnt, ist die wichtigste Bedeutung des Knockouts die Zwei-Wege-Bindung. Wie erreichen wir also unsere Zwei-Wege-Bindung? Die Antwort ist die Überwachung von Eigenschaften.

In Knockout gibt es drei Kernüberwachungsattribute: Observables, DependentObservables und ObserveArray. Es scheint unangemessen, es Beobachtungsattribut oder Beobachtungsattribut zu nennen .

3.1. Observables: Überwachungsattribute

Wir ändern das obige Beispiel wie folgt:

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>



<div> 
姓名：<label data-bind="text:Name"></label><br />
职业：<input type="text" data-bind="textinput:Profession" />
</div>

ko.observable("Lilei") 这一句的意义是将viewmodel的Name属性添加成为监控属性，一定Name属性变成监控属性，神奇的事情就发生了，我们来看看当我们写myViewModel.的时候：

Name由原来的属性变成方法了，也就是说一旦添加了ko.observable()，那么对应的属性就会变成方法，那么对于Name的取值和赋值都需要使用myViewModel.Name()来处理。

代码释疑：很显然 myViewModel.Name($(this).val()); 这一句将当前文本框的值赋给了Name属性，由于界面绑定了Name属性，所以label里面的值也随之发生了变化。或者你会说，这个使用textchange事件也可以做到的，只要将当前文本框的值赋给label标签，也可以达到这个效果，这个不算什么。确实，你的写法也可以达到目的，但是我们的监控属性的意义在于，任何地方改变了Name的值，界面都会随之变化，而不用每个地方去给label标签赋值，JS里面只需要把关注点方法myViewModel.Name()上面即可。是不是很厉害~~

3.2、DependentObservables：监控依赖属性

如果看了上面的监控属性还没过瘾？下面再来看看监控依赖属性的使用。

我们将代码再改下看看：

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>



 
姓名：

职业：

描述：

代码释疑：通过添加监控依赖属性 ko.dependentObservable() 将Des属性的值能同时监控到Name和Profession两个的变化，其中任何一个发生变化，Des绑定的标签都会触发改变，这样做的最大好处就是避免了我们js去操作dom的麻烦，有点意思吧。

3.3、ObservableArray；监控数组

除了上面两种，ko还支持对数组对象的监控。我们来看一个例子：

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

代码释疑：以上通过ko.observableArray()这个方法添加了对数组对象的监控，也就是说，js里面任何地方只要对deptArr数组对象做了数组的改变，都会触发UI给出相应。需要注意的一点是，监控数组实际上是监控的数组对象本身，对于数组对象里面的子对象属性发生变化，是无法监控到的。比如我们将点击事件改成这样：

$(function () {
$("#btn_test").on("click", function () {
deptArr[1].Name = "aaa";
});
});

由此说明数组监控实际上监控的是数组对象本身，对于数组里面元素的属性变化不会监控。如果确实需要对数据里面对象的属性变化进行监控，需要再对数据里面对象属性使用ko.observable()，两者联合使用。有兴趣的可以试试。

4、ko里面常见的data-bind属性

上文中，我们使用了多个data-bind属性，那么在knockout里面，到底有多少个这种data-bind的属性呢。这里我们列出一些常用的属性。

4.1、text和inputText

text，顾名思义就是文本的意思，这个绑定属性一般用于、、

　　<div> 
姓名：<label data-bind="text:Name"></label><br />
职业：<input type="text" data-bind="textinput:Profession" />
</div> 
　　　　 //1.定义ViewModel
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: "软件工程师",
};
//2.激活绑定
ko.applyBindings(myViewModel);

姓名：
<input type="text" data-bind="value:Name,valueUpdate:&#39;keyup&#39;" /><br /> 
　　　　var myViewModel = {
Name: ko.observable("Lilei"),
};//2.激活绑定
ko.applyBindings(myViewModel);

<div>
<input type="text" data-bind="enable:IsMen"/>
</div>
<script type="text/javascript">
//1.定义ViewModel
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: ko.observable("软件工程师"),
Age: ko.observable(40),
IsMen:ko.observable(true)
};
//2.激活绑定
ko.applyBindings(myViewModel);
myViewModel.IsMen(false);
</script>

<style type="text/css">
.testbold {
background-color:powderblue;
}
</style> 
<div data-bind="css:{testbold:myViewModel.Name()==&#39;Lilei&#39;}">aaaa</div> 
var myViewModel = {
Name: ko.observable("Lilei"),
Profession: ko.observable("软件工程师"),
Age:ko.observable(40)
};

<div data-bind="css:{testbold:myViewModel.Name()==&#39;Lilei&#39;,testborder:myViewModel.Profession()==&#39;PHP工程师&#39;}">aaaa</div>

<div data-bind="css:{background-color:myViewModel.Name()==&#39;Lilei&#39;?&#39;red&#39;:&#39;white&#39;}">aaaa</div>

<div>
<input type="button" value="测试click绑定" data-bind="click:ClickFunc" />
</div> 
　　　　var myViewModel = {
ClickFunc:function(){
alert($(event.currentTarget).val());
}
};
ko.applyBindings(myViewModel);

<div>
<input type="button" value="测试click绑定" data-bind="click:function(){
alert(&#39;点击了&#39;);
}" />
</div>

$.ajax({
url: "/Home/GetData",
type: "get",
data: {},
success: function (data, status) {
var oJson = data;
}
});

　　　　var myViewModelJson = {
DeptName: ko.observable(),
DeptLevel: ko.observable(),
DeptDesc:ko.observable()
};
ko.applyBindings(myViewModelJson);

success: function (data, status) {
var oJson = data;
myViewModelJson.DeptName(oJson.DeptName);
myViewModelJson.DeptLevel(oJson.DetpLevel);
myViewModelJson.DeptDesc(oJson.DeptDesc);
}

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

　　　　　　　　　success: function (data, status) {
var myViewModelJson2 = ko.mapping.fromJS(data);
ko.applyBindings(myViewModelJson2);
}

　　　　var myViewModelJson = {
DeptName: ko.observable(),
DeptLevel: ko.observable(),
DeptDesc:ko.observable()
};
ko.applyBindings(myViewModelJson);
$(function () {
$.ajax({
url: "/Home/GetData",
type: "get",
data: {},
success: function (data, status) {
ko.mapping.fromJS(data, myViewModelJson)
}
});
});

$(function () {
var oJson1 = ko.toJS(myViewModelJson);
var oJson2 = ko.toJSON(myViewModelJson);
});
var myViewModelJson = {
DeptName: ko.observable("研发部"),
DeptLevel: ko.observable("2"),
DeptDesc: ko.observable("开发一伙人")
};
ko.applyBindings(myViewModelJson);

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
};

<div> 
<select data-bind="MySelect:$root">
<option id="1">研发部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).multiselect();
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
};

<div style="text-align:center;"> 
<select data-bind="MySelect:$root">
<option id="1">研发部</option>
<option id="2">人事部</option>
<option id="3">行政部</option>
</select>
</div>

$(function () {
var MultiSelect = {};
ko.applyBindings(MultiSelect);
});

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var oParam = valueAccessor();
$(element).multiselect(oParam);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
};

$(function () {
var MultiSelect = {
enableClickableOptGroups: true,//收起分组
onChange: function (option, checked) {
alert("选择改变");
}
};
ko.applyBindings(MultiSelect);
});