ko 学习之循环表示 数据绑定(Knockout)

AA.cshtml

<!-- ko foreach: Details -->
                    <li class="li_style " data-bind="event:{click:toUrl.bind($data,$data.Url,$data.Id,$data.NameA)},css:{li_style_1:Details().length == 1}">
                        <div style="float:left;" data-bind="event:{load:testLoad($data.Id, $data.NameB)}">
                            <div style="float:left; margin:0 10px 10px 10px;width: 90%;">
                                <div class="photo">
                                    <img style="height:187px;width: 100%;" data-bind="attr:{src:$data.ImageUrl}" alt="img" />
<img style="height:187px;width: 100%;" data-bind="attr:{src:getImgUrl($data.ImageUrl)}" alt="img" />
                                </div>
                                <div class="intro">
                                    <div  style="text-align:left;height:120px;">
                                        <span data-bind="html:formatTitle($data.Title)"></span>
                                    </div>
                                    <div class="divbtn">
                                        <button class="btn" id="btn">详细</button>
                                    </div>
                                </div>
                            </div>
                            <div class="line" data-bind="visible:Details().length != 1 && $index()%2 == 0"></div>
                        </div>
                    </li>
                    <!--/ko -->

 public class TestController : AbstractController
    { 
...      
 [HttpGet]
        public JsonResult GetDetails(int paramA, int paramB)
        {
            List<DetailDto> list = GetList(paramA, paramB);
            return new JsonResult
            {
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                Data = list
            };
        }
}

 

1.JSON数据绑定循环表示

<!-- ko foreach: Details -->

 <!--/ko -->

Details 和test.js里定义要一致

 test.js
                    function TestViewModel(paramA, paramB) {
                            self.ShowDetail = ko.observable(false);
                            self.Details = ko.observable(self.Details);
                            $.getJSON("/Test/GetDetails?paramA=" + paramA + "&paramB=" + paramB, function (data) {
                                if (data) {
                                    self.Details(data);
                                    self.ShowDetail(data.length > 0);
                                }
                            });
                            self.formatTitle = function (str) {
                            return self.shortenString(str, 20, '...');
    };
                    }

2.根据JSON数据长度，设定表示式样（数据只有1个是css li_style_1 有效）

    data-bind="css:{li_style_1:Details().length == 1}"

 3.当前数据的索引$index()：从0开始

       <div class="line" data-bind="visible:Details().length != 1 && $index()%2 == 0">

4. 数据绑定

 4.1文本绑定：data-bind="html:formatTitle($data.Title)"

 4.2 事件绑定onclick ==》

①data-bind="event:{click:toUrl.bind($data,$data.Url,$data.Id,$data.NameA)},css:{li_style_1:Details().length == 1}"

②data-bind="event:{click:toUrl($data.Url,$data.Id,$data.NameA)}"

toUrl.bind的第一个参数固定是$data

①和②有个不同就是，①是点击的时候才触发，②点击的时候会触发而且初期表示的时候也会触发

4.3 事件绑定load ==》data-bind="event:{load:testLoad($data.Id, $data.NameB)}"

如果同时在li标签里面：<li class="li_style " data-bind="event:{load:testLoad($data.Id, $data.NameB),click:toUrl.bind($data,$data.Url,$data.Id,$data.NameA)},css:{li_style_1:Details().length == 1}">

4.4 图片src绑定

 ①data-bind="attr:{src:$data.ImageUrl}"

 ②data-bind="attr:{src:getImgUrl($data.ImageUrl)}" 需要拼图片路径的时候可以用这样的方式

 <script>
        $(function () {
            var paramA = 1111111;
            var paramB = 0;
            var viewModel = new TestViewModel(paramA,paramB);
            ko.applyBindings(viewModel);
         });
                    function toUrl(url, Id, NameA) {
                        if (adUrl == null || adUrl == "") {
                            return;
                        }
                        alert(url);
                        window.location.href = url;
                    }
        function testLoad(Id, NameB) {
            alert(NameB);
        }

        function getImgUrl(adImageUrl) {

            var baseUrl = "/Content/@ViewBag.BaseUrl/";

            var url = baseUrl + adImageUrl;

            return url;

        }
        </script>
                    

 

 

本文地址：https://blog.csdn.net/SURE19851218/article/details/107341277