zoukankan      html  css  js  c++  java
  • KO Demo

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>Knockout: Getting Started</title>
    
    <link href="../css/fonts.css" rel="stylesheet" type="text/css" />
    <link href="../css/styles.css" rel="stylesheet" type="text/css" />
    
    <script src="../scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../Scripts/knockout-2.3.0.debug.js"></script>
    </head>
    <body>
    Products:
    <ul data-bind="foreach: products">
    <li>
    <div data-bind="text: name, click: $root.selectProduct"></div>
    <span data-bind="text: isSelected"></span>
    </li>
    </ul>
    <script type="text/javascript">
    var my = my || { };
    $(function() {
    my.Product = function(selectedItem) {
    var self = this;
    self.name = ko.observable();
    self.model = ko.observable();
    self.isSelected = ko.computed(function () {
    return selectedItem() === self;
    });
    
    };
    my.vm = (function() {
    var data = [{ name: "Nokia", model: "520" }, { name: "LG", model: "920" }];
    var products = ko.observableArray();
    var selectedproduct = ko.observable();
    var selectProduct = function(p) {
    selectedproduct(p);
    };
    var loadProducts = function() {
    $.each(data, function(i,p) {
    products.push(new my.Product(selectedproduct).name(p.name).model(p.model));
    });
    };
    
    return {
    products: products,
    selectProduct: selectProduct,
    loadProduct: loadProducts
    };
    })();
    my.vm.loadProduct();
    ko.applyBindings(my.vm);
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    monads-are-elephants(转)
    程序语言简史(转)
    语法的省略不能造成编译器的歧义
    scala getter and setter
    隐式类型转换
    java 调用 scala
    列表的操作
    Scala HandBook
    Scala 高级编程练习
    Net 2.0 C# 专用的只读类Tuple
  • 原文地址:https://www.cnblogs.com/shineqiujuan/p/3307724.html
Copyright © 2011-2022 走看看