高级应用举例-KnockoutJS入门指南

当前位置:　首页>> 技术小册>> KnockoutJS入门指南

1   Contacts editor
这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的，我们可以看看Knockout实现是难了还是容易了。

代码```量的多少不重要（尽快Knockout 的实现很简洁），重要的看起来是否容易理解且可读。查看HTML源代码，看看如何实现的view model以及绑定的。

![](/uploads/images/20230405/38a7d9777f044eea1205d5c89671f483.png)

代码: View
```
<h2>Contacts</h2>
<div id="contactsList" data-bind='template: "contactsListTemplate"'>
</div>
<script type="text/html" id="contactsListTemplate">
     <table class='contactsEditor'>
        <tr>
            <th>First name</th>
<th>Last name</th>
<th>Phone numbers</th>
</tr>

{{each(i, contact) contacts()}}      
            <tr>
                <td>
                    <input data-bind="value: firstName"/>
<div><a href="#" data-bind="click: function() { viewModel.removeContact(contact) }">Delete</a></div>
                </td>
<td><input data-bind="value: lastName"/></td>
                <td>
                    <table>
                        {{each(i, phone) phones}}
                            <tr>
                                <td><input data-bind="value: type"/></td>
                                <td><input data-bind="value: number"/></td>
                                <td><a href="#" data-bind="click: function() { viewModel.removePhone(contact, phone) }">Delete</a></td>
                            </tr>
                        {{/each}}
</table>
<a href="#" data-bind="click: function() { viewModel.addPhone(contact) }">Add number</a>
</td>
</tr>
        {{/each}}
</table>
</script>
<p>
    <button data-bind="click: addContact">
        Add a contact</button>
    <button data-bind="click: save, enable: contacts().length > 0">
        Save to JSON</button>
</p>
<textarea data-bind="value: lastSavedJson" rows="5" cols="60" disabled="disabled"> </textarea>
```
代码: View model
```
var viewModel = {
    contacts: new ko.observableArray([
        { firstName: "Danny", lastName: "LaRusso", phones: [
            { type: "Mobile", number: "(555) 121-2121" },
            { type: "Home", number: "(555) 123-4567"}]
        },

{ firstName: "Sensei", lastName: "Miyagi", phones: [
            { type: "Mobile", number: "(555) 444-2222" },
            { type: "Home", number: "(555) 999-1212"}]
        }
    ]),

addContact: function () {
        viewModel.contacts.push({ firstName: "", lastName: "", phones: [] });
    },

removeContact: function (contact) {
        viewModel.contacts.remove(contact);
    },

addPhone: function (contact) {
        contact.phones.push({ type: "", number: "" });
        viewModel.contacts.valueHasMutated();
    },

removePhone: function (contact, phone) {
        ko.utils.arrayRemoveItem(contact.phones, phone);
        viewModel.contacts.valueHasMutated();
    },

save: function () {
        viewModel.lastSavedJson(JSON.stringify(viewModel.contacts(), null, 2));
    },

lastSavedJson: new ko.observable("")
};

ko.applyBindings(viewModel);
```
2   Editable grid
该例是使用“foreach”绑定为数组里的每一项来render到 template上。好处（相对于模板内部使用for循环）是当你添加或者删除item项的时候，Knockout不需要重新render – 只需要render新的item项。就是说UI上其它控件的状态（比如验证状态）不会丢失。

如何一步一步构建这个例子并集成ASP.NET MVC，请参阅此贴。

![](/uploads/images/20230405/c65c50fcec15e796ee01ea84452ab739.png)

代码: View
```
<form action="/someServerSideHandler">
<p>
    You have asked for <span data-bind="text: gifts().length">&nbsp;</span> gift(s)</p>
<table data-bind="visible: gifts().length > 0">
    <thead>
        <tr>
            <th>Gift name</th>
            <th>Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind='template: { name: "giftRowTemplate", foreach: gifts }'>
    </tbody>
</table>
<button data-bind="click: addGift">
    Add Gift</button>
<button data-bind="enable: gifts().length > 0" type="submit">
    Submit</button>
</form>
<script type="text/html" id="giftRowTemplate">
    <tr>
        <td><input class="required" data-bind="value: name, uniqueName: true"/></td>
        <td><input class="required number" data-bind="value: price, uniqueName: true"/></td>
        <td><a href="#" data-bind="click: function() { viewModel.removeGift($data) }">Delete</a></td>
    </tr>
</script>
```
代码: View model
```
var viewModel = {
    gifts: ko.observableArray([
        { name: "Tall Hat", price: "39.95" },
        { name: "Long Cloak", price: "120.00" }
    ]),
    
    addGift: function () {
        this.gifts.push({ name: "", price: "" });
    },
    
    removeGift: function (gift) {
        this.gifts.remove(gift);
    },

save: function (form) {
        alert("Could now transmit to server: " + ko.utils.stringifyJson(this.gifts));
        // To transmit to server, write this: ko.utils.postJson($("form")[0], this.gifts);
    }
};

ko.applyBindings(viewModel);

$("form").validate({ submitHandler: function () { viewModel.save() } });
```
3   Shopping cart screen
这个例子展示的是依赖监控属性（dependent observable）怎么样链在一起。每个cart对象都有一个dependentObservable对象去计算自己的subtotal，这些又被一个进一步的dependentObservable对象依赖计算总的价格。当改变数据的时候，整个链上的依赖监控属性都会改变，所有相关的UI元素也会被更新。

这个例子也展示了如何创建联动的下拉菜单。
![](/uploads/images/20230405/23bfca885a28288d561d21ab360953dc.png)

代码: View
```
<div id="cartEditor">
    <table width="100%">
        <thead>
            <tr>
                <th width="25%">Category</th>
                <th width="25%">Product</th>
                <th width="15%" class='price'>Price</th>
                <th width="10%" class='quantity'>Quantity</th>
                <th width="15%" class='price'>Subtotal</th>
                <th width="10%"></th>
            </tr>
        </thead>
        <tbody data-bind='template: {name: "cartRowTemplate", foreach: lines}'>
        </tbody>
    </table>
    <p class="grandTotal">
        Total value: <span data-bind="text: formatCurrency(grandTotal())"></span>
    </p>
    <button data-bind="click: addLine">
        Add product</button>
    <button data-bind="click: save">
        Submit order</button>
</div>
<script type="text/html" id="cartRowTemplate">
   <tr>
        <td><select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'></select></td>
        <td><select data-bind='visible: category, options: category() ? category().products : null, optionsText: "name", optionsCaption: "Select...", value: product'></select></td>
        <td class='price'><span data-bind='text: product() ? formatCurrency(product().price) : ""'></span></td>
        <td class='quantity'><input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"'/></td>
        <td class='price'><span data-bind='visible: product, text: formatCurrency(subtotal())'></span></td>
        <td><a href="#" data-bind='click: function() { cartViewModel.removeLine($data) }'>Remove</a></td>
    </tr>
</script>
```
代码: View model
```
function formatCurrency(value) { return "$" + value.toFixed(2); }

var cartLine = function () {
    this.category = ko.observable();
    this.product = ko.observable();
    this.quantity = ko.observable(1);
    this.subtotal = ko.dependentObservable(function () {
        return this.product() ? this.product().price * parseInt("0" + this.quantity(), 10) : 0;
    } .bind(this));

// Whenever the category changes, reset the product selection
    this.category.subscribe(function () { this.product(undefined); } .bind(this));
};

this.save = function () {
        var dataToSave = $.map(this.lines(), function (line) {
            return line.product() ? { productName: line.product().name, quantity: line.quantity()} : undefined
        });

alert("Could now send this to server: " + JSON.stringify(dataToSave));
    };
};

var cartViewModel = new cart();

ko.applyBindings(cartViewModel, document.getElementById("cartEditor"));
```
4   Twitter client
这是一个复杂的例子，展示了几乎所有Knockout特性来构建一个富客户端。

用户数据存在一个JavaScript模型里，通过模板来展示。就是说我们可以通过清理用户列表里的数据来达到隐藏用户信息的目的，而不需要手动去隐藏DOM元素。

按钮将根据他们是否可操作来自动变成enabled或disabled状态。例如，有一个叫hasUnsavedChanges的依赖监控属性（dependentObservable）控制这“Save”按钮的enabled状态。

可以非常方便地从外部JSON服务获取数据，并集成到view model里，然后显示在页面上。

![](/uploads/images/20230405/328b28676d144b51020d8e14355758e5.png)

代码: View
```
<div class="loadingIndicator">
    Loading...</div>
<div class="configuration">
    <div class="listChooser">
        <button data-bind='click: deleteList, enable: editingList.name'>
            Delete</button>
        <button data-bind='click: saveChanges, enable: hasUnsavedChanges'>
            Save</button>
        <select data-bind='options: savedLists, optionsValue: "name", value: editingList.name'>
        </select>
    </div>
    <p>
        Currently viewing <span data-bind="text: editingList.userNames().length">&nbsp;</span>
        user(s):</p>
    <div class="currentUsers" data-bind='template: { name: "usersTemplate", data: editingList }'>
    </div>
    <form data-bind="submit: addUser">
    <label>
        Add user:</label>
    <input data-bind='value: userNameToAdd, valueUpdate: "keyup", css: { invalid: !userNameToAddIsValid() }' />
    <button type="submit" data-bind='enable: userNameToAddIsValid() && userNameToAdd() != ""'>
        Add</button>
    </form>
</div>
<div class="tweets" data-bind='template: { name: "tweetsTemplate", data: currentTweets }'>
</div>
<script type="text/html" id="tweetsTemplate">
    <table width="100%">
        {{each $data}}
            <tr>
                <td><img src="${ profile_image_url }"/></td>
                <td>
                    <a class="twitterUser" href="http://twitter.com/${ from_user }">${ from_user }</a>
                    ${ text }
                    <div class="tweetInfo">${ created_at }</div>
</td>
</tr>
        {{/each}}
</table>
</script>
<script type="text/html" id="usersTemplate">
    <ul>
        {{each(i, userName) userNames()}}
            <li><button data-bind="click: function() { userNames.remove(userName) }">Remove</button> <div>${ userName }</div></li>
        {{/each}}
</ul>
</script>
```
代码: View model
```
// The view model holds all the state we're working with. It also has methods that can edit it, and it uses
// dependentObservables to compute more state in terms of the underlying data
// --
// The view (i.e., the HTML UI) binds to this using data-bind attributes, so it always stays up-to-date with
// the view model, even though the view model does not know or care about any view that binds to it

var viewModel = {
    savedLists: ko.observableArray([
        { name: "Celebrities", userNames: ['JohnCleese', 'MCHammer', 'StephenFry', 'algore', 'StevenSanderson'] },
        { name: "Microsoft people", userNames: ['BillGates', 'shanselman', 'haacked', 'ScottGu'] },
        { name: "Tech pundits", userNames: ['Scobleizer', 'LeoLaporte', 'techcrunch', 'BoingBoing', 'timoreilly', 'codinghorror'] }
    ]),

editingList: {
        name: ko.observable("Tech pundits"),
        userNames: ko.observableArray()
    },

userNameToAdd: ko.observable(""),
    currentTweets: ko.observableArray([])
};

viewModel.findSavedList = function (name) {
    var lists = this.savedLists();

for (var i = 0; i < lists.length; i++)
        if (lists[i].name === name)
            return lists[i];
};

// Methods
viewModel.addUser = function () {
    if (this.userNameToAdd() && this.userNameToAddIsValid()) {
        this.editingList.userNames.push(this.userNameToAdd());
        this.userNameToAdd("");
    }
}

viewModel.saveChanges = function () {
    var saveAs = prompt("Save as", this.editingList.name());

if (saveAs) {
        var dataToSave = this.editingList.userNames().slice(0);
        var existingSavedList = this.findSavedList(saveAs);
        if (existingSavedList)
            existingSavedList.userNames = dataToSave; // Overwrite existing list
        else
            this.savedLists.push({ name: saveAs, userNames: dataToSave }); // Add new list

this.editingList.name(saveAs);
    }
}

viewModel.deleteList = function () {
    var nameToDelete = this.editingList.name();
    var savedListsExceptOneToDelete = $.grep(this.savedLists(), function (list) { return list.name != nameToDelete });
    this.editingList.name(savedListsExceptOneToDelete.length == 0 ? null : savedListsExceptOneToDelete[0].name);
    this.savedLists(savedListsExceptOneToDelete);
};

ko.dependentObservable(function () {
    // Observe viewModel.editingList.name(), so when it changes (i.e., user selects a different list) we know to copy the saved list into the editing list
    var savedList = viewModel.findSavedList(viewModel.editingList.name());

if (savedList) {
        var userNamesCopy = savedList.userNames.slice(0);
        viewModel.editingList.userNames(userNamesCopy);
    } else
        viewModel.editingList.userNames([]);
});

viewModel.hasUnsavedChanges = ko.dependentObservable(function () {
    if (!this.editingList.name())
        return this.editingList.userNames().length > 0;

var savedData = this.findSavedList(this.editingList.name()).userNames;
    var editingData = this.editingList.userNames();
    return savedData.join("|") != editingData.join("|");
}, viewModel);

viewModel.userNameToAddIsValid = ko.dependentObservable(function () {
    return (this.userNameToAdd() == "") || (this.userNameToAdd().match(/^\s*[a-zA-Z0-9_]{1,15}\s*$/) != null);
}, viewModel);

// The active user tweets are (asynchronously) computed from editingList.userNames
ko.dependentObservable(function () {
    twitterApi.getTweetsForUsers(this.editingList.userNames(), function (data) { viewModel.currentTweets(data) })
}, viewModel);

ko.applyBindings(viewModel);

// Using jQuery for Ajax loading indicator - nothing to do with Knockout
$(".loadingIndicator").ajaxStart(function () { $(this).fadeIn(); })
                      .ajaxComplete(function () { $(this).fadeOut(); });
```

该分类下的相关小册推荐：

javascript设计模式原理与实战

npm script实战构建前端工作流

JavaScript面试指南

零基础学JavaScript

Javascript重点难点实例精讲（一）

Javascript-ES6与异步编程

Flutter核心技术与实战

Javascript编程指南

深入学习前端重构知识体系

JavaScript入门与进阶

编程入门课：Javascript从入门到实战

剑指javascript