`
sillycat
  • 浏览: 2542909 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Front End Starter(2)knockout - Introduction and List

    博客分类:
  • UI
 
阅读更多

Front End Starter(2)knockout - Introduction and List

Follow the Doc Here 
http://learn.knockoutjs.com/#/?tutorial=intro

1. Knockout - Introduction
Model-View-ViewModel (MVVM)

Binding the Value
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName "Sillycat";
    this.lastName "Carl";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());

Column Editable and Observable
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

function AppViewModel() {
    this.firstName ko.observable("Sillycat");
    this.lastName ko.observable("Carl");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());

Computed the Value
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

function AppViewModel() {
    this.firstName ko.observable("Carl");
    this.lastName ko.observable("Luo");
    this.fullName ko.computed(function() {
        return this.firstName() + " " this.lastName();
    }, this);
}

ko.applyBindings(new AppViewModel());

Binding the Button Function
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<button data-bind="click: capitalizeLastName">Go caps</button>

function AppViewModel() {
    this.firstName = ko.observable("Carl");
    this.lastName = ko.observable("Luo");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
   
    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}

ko.applyBindings(new AppViewModel());

2. Knockout - Lists and Collections
Think in the JavaScript Way
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];   

    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[1]),
        new SeatReservation("Sillycat", self.availableMeals[2])
    ]);
}

ko.applyBindings(new ReservationsViewModel());

<h2>Your seat reservations</h2>

<table>
    <thead>
        <tr>
        <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: seats">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: meal().mealName"></td>
            <td data-bind="text: meal().price"></td>
        </tr>
    </tbody>
</table>

Adding Items
<button data-bind="click: addSeat">Reserve another seat</button>

function ReservationsViewModel() {
    var self = this;

    …snip…
   
    self.addSeat = function() {
        self.seats.push(new SeatReservation("Kiko", self.availableMeals[0]));
    }
}

Making the data editable
    <tbody data-bind="foreach: seats">
        <tr>
            <td><input data-bind="value: name" /></td>
            <td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
            <td data-bind="text: meal().price"></td>
        </tr>
    </tbody>

Formatting the Price
        <tr>
            <td><input data-bind="value: name" /></td>
            <td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
            <td data-bind="text: formattedPrice"></td>
        </tr>

function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
   
    self.formattedPrice = ko.computed(function(){
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";
    });
}

I really love this JS tool.

Remove Items
        <tr>
            <td><input data-bind="value: name" /></td>
            <td><select data-bind="options: $root.availableMeals,value: meal, optionsText: 'mealName' " /></td>
            <td data-bind="text: formattedPrice"></td>
            <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
        </tr>

function ReservationsViewModel() {
    var self = this;

     …snip...
   
    self.removeSeat = function(seat) {
        self.seats.remove(seat)
    }
}

Displaying a Total Surcharge
    self.totalSurcharge = ko.computed(function() {
        var total = 0;
        for (var i = 0; i < self.seats().length; i++) {
            total += self.seats()[i].meal().price;
        }
        return total;
    });

    <h3 data-bind="visible: totalSurcharge() > 0">
        Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
    </h3>

Some Control of the Data Binding Column
<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>

<button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>

References:
http://knockoutjs.com/

http://www.cnblogs.com/tomxu/archive/2011/11/21/2257154.html



 

分享到:
评论

相关推荐

    knockout-amd-helpers

    《深入理解knockout-amd-helpers:构建可复用的Knockout模块》 在JavaScript的世界里,AMD(Asynchronous Module Definition)模式已经成为一种流行的方式,用于组织和加载模块化代码,尤其在大型项目中,它能有效...

    knockout-3.4.2下载

    knockout-3.4.2下载 一直研究knockout有兴趣的朋友一起

    前端项目-knockout-bootstrap.zip

    【前端项目-knockout-bootstrap.zip】是一个包含使用Knockout.js和Bootstrap框架构建的前端项目的压缩包。这个项目主要是为了展示如何将Knockout.js的强数据绑定功能与Bootstrap的UI组件结合,以创建功能丰富的、...

    前端项目-knockout-dragdrop.zip

    《前端项目:Knockout-Dragdrop 深度解析》 在当今的Web开发领域,前端技术日新月异,交互体验成为了评判一个网站或应用优劣的重要标准。其中,拖放(Drag and Drop)功能是提升用户体验的常用手段之一。本文将深入...

    knockout-3.3.0.min.js

    knockout-3.3.0.min.js源碼文件,通過[removed][removed],就可以直接引用,用於數據綁定

    前端项目-knockout-sortable.zip

    2. 功能特性:knockout-sortable不仅支持基本的拖放排序,还提供了如禁用排序、自定义排序事件处理、设置排序标志等多种高级特性,满足复杂应用场景的需求。 3. 整合优势:通过knockout-sortable,开发者无需关心...

    前端项目-knockout-validation.zip

    **前端项目-knockout-validation.zip** 是一个包含KnockoutJS验证插件的前端开发资源包,主要用于在基于KnockoutJS的项目中实现模型和属性的验证功能。KnockoutJS是一个流行的JavaScript库,它提供了MVVM(Model-...

    前端项目-knockout-postbox.zip

    《使用Knockout和Postbox实现前端项目中的组件通信》 在现代Web开发中,组件化已经成为构建大型、复杂应用的...在“前端项目-knockout-postbox”中,你将有机会亲身体验这种通信方式的魅力,并探索更多的实践可能性。

    Knockout-UI, 在KnockoutJS上,一个基于富UI组件.zip

    Knockout-UI, 在KnockoutJS上,一个基于富UI组件 用户界面是基于 Knockout 和 jQuery UI的UI组件的集合。这个项目的目标是集成一些有用的小部件,可以以由社区重用和扩展。我开始在 2010年月 中学习 Knockout,并...

    前端项目-knockout-paging.zip

    **前端项目-knockout-paging.zip** 是一个包含前端分页功能实现的代码包,主要基于Knockout.js库进行开发。Knockout.js是一个轻量级的数据绑定库,它帮助开发者实现MVVM(Model-View-ViewModel)模式,使得前端界面...

    前端项目-knockout-delegated-events.zip

    **前端项目-knockout-delegated-events** 在前端开发中,事件处理是用户交互的核心部分。Knockout.js 是一个流行的 JavaScript MVVM(Model-View-ViewModel)库,它简化了数据绑定和DOM操作。然而,原生 Knockout....

    单页应用框架knockout-spa.zip

    用Knockout, Require, Director, jQuery, Sugar搭建的单页程序(SPA Single Page Application)框架。 标签:knockout

    knockout-master.zip

    "knockout-master.zip" 是一个包含Knockout源代码的压缩文件,Knockout是一个流行的JavaScript库,专为构建富交互式的Web应用程序而设计。它利用MVVM(Model-View-ViewModel)模式,帮助开发者轻松地管理DOM元素与...

    g5-knockout-dot:带有 KnockoutJS 和 dot 模板的简单模块基础

    #g5-knockout-dot.js 带有 KnockoutJS 和 dot 模板的简单模块基础###设置安装包并将其用作组件的脚手架 git clone https://github.com/MajorLeagueBaseball/g5-knockout-dot.git npm install###服务器服务器...

    knockout-2.2.0.js

    简化动态JavaScript ui通过应用模型-视图-视图模型(MVVM) 声明式绑定 容易副DOM元素与模型数据使用一个简洁、易读的语法 自动UI刷新 当你的数据模型的状态发生变化时,你的UI自动更新 依赖跟踪 隐式地设置链模型数据...

    前端项目-knockout-pre-rendered.zip

    **前端项目-knockout-pre-rendered** 这个前端项目的核心是使用Knockout.js库实现预渲染功能,旨在提高页面加载速度和用户体验。Knockout.js是一个轻量级、MVVM(Model-View-ViewModel)模式的JavaScript库,主要...

    前端项目-knockout-es5.zip

    **前端项目-knockout-es5.zip** 这个压缩包文件包含了一个使用Knockout.js库的前端项目,该库是基于ECMAScript 5规范构建的。Knockout.js是一款轻量级、强大的MVVM(Model-View-ViewModel)JavaScript框架,它使得...

    knockout-jsx:结合使用JSX和淘汰赛

    npm install --save knockout-jsx安装后, knockout-jsx支持多种类型的导入。ES6 import { registerJSXComponent } from 'knockout-jsx' ;普通JS const { registerJSXComponent } = require ( 'knockout-jsx' ) ;//...

    Knockout-Validation:Knockout JS的验证库

    bower install knockout-validation --save NuGet PM &gt; Install-Package Knockout.Validation NPM npm install knockout.validation --save CDN cdnjs ...

Global site tag (gtag.js) - Google Analytics