Javascript 深入了解淘汰版js中的Ajax风格

我正在构建一个web应用程序，并希望将UI转换为使用Knockout JS。我在淘汰赛中是个绝无仅有的人，所以请善待我

通常我会加载一个员工列表（使用PHP），然后如果选择了一个员工，我会使用JQuery找到该员工的ID，然后对我的后端进行和AJAX调用，填写结果框并将其向下滑动

---

有没有一种方法可以在Knockout中复制这种行为？

这听起来类似于Knockout教程中文件夹和电子邮件的深入分析。

这听起来类似于Knockout教程中文件夹和电子邮件的深入分析。

一个供您启动的样板，使用jQuery和Knockout

HTML

<ul data-bind="foreach: employees">
    <li data-bind="css: {current: $data == $root.selected()}, click: $root.selected">
      #<span data-bind="text: id"></span> - <span data-bind="text: name"></span>
    </li>
</ul>
<div data-bind="slideVisible: ! loading(), html: employee_detail"></div>

JS

.current {
    background: blue;
    color: white;
}
ul>li {
    list-style: none;
}

$(function() {
    // for your requirment on sliding animation, this slideVisible is copied from http://knockoutjs.com/documentation/custom-bindings.html
    ko.bindingHandlers.slideVisible = {
        update: function(element, valueAccessor, allBindings) {
            var value = valueAccessor();
            var valueUnwrapped = ko.unwrap(value);
            var duration = allBindings.get('slideDuration') || 400;
            if (valueUnwrapped == true)
                $(element).slideDown(duration); // Make the element visible
            else
                $(element).slideUp(duration);   // Make the element invisible
        }
    };

    var vm = {
        employees: ko.observableArray([
            // build your initial data in php
            {id: 1, name: 'John'},
            {id: 2, name: 'Tom'},
            {id: 3, name: 'Lily'},
            {id: 4, name: 'Bob'}
        ]),
        selected: ko.observable(),  // a placeholder for current selected
        loading: ko.observable(false), // an indicator for ajax in progress
        employee_detail: ko.observable()  // holder for content from ajax return
    };

    // when user selects an employee, fire ajax
    vm.selected.subscribe(function(emp) {
        var emp_id = emp.id;

        // ajax starts
        vm.loading(true);

        $.ajax('/echo/html/?emp_id='+emp_id, {
            // just a simulated return from jsfiddle
            type: 'POST',
            data: {
                html: "<b>Employee #" + emp_id + "</b><p>Details, bla bla...</p>",
                delay: 0.2
            },

            success: function (content) {
                // update employee_detail
                vm.employee_detail(content);
            },
            complete: function() {
                // ajax finished
                vm.loading(false);
            }
        });
    });

    ko.applyBindings(vm);
});

$（函数（）{
//根据您对滑动动画的要求，此SlideVible复制自http://knockoutjs.com/documentation/custom-bindings.html
ko.bindingHandlers.slidevible={
更新：函数（元素、valueAccessor、allBindings）{
var value=valueAccessor（）；
var valueUnwrapped=ko.unwrapp（值）；
var duration=allBindings.get（'slideDuration'）| | 400；
if（valueUnwrapped==true）
$（元素）.slideDown（持续时间）；//使元素可见
其他的
$（元素）.slideUp（持续时间）；//使元素不可见
}
};
var vm={
员工：ko.Array([
//用php构建初始数据
{id:1，名字：'John'}，
{id:2，名字：'Tom'}，
{id:3，名字：'Lily'}，
{id:4，名称：'Bob'}
]),
所选：ko.observable（），//当前所选对象的占位符
加载：ko.observable（false），//正在进行的ajax的指示器
employee_detail:ko.observable（）//ajax返回内容的持有者
};
//当用户选择员工时，启动ajax
vm.selected.subscribe（功能（emp）{
var emp_id=emp.id；
//ajax启动
vm.loading（true）；
$.ajax（'/echo/html/？emp\u id='+emp\u id{
//只是从JSFIDLE模拟返回
键入：“POST”，
数据：{
html:“员工#”+emp_id+“详细信息，bla bla…
”，
延迟：0.2
},
成功：功能（内容）{
//更新员工信息
vm.员工详细信息（内容）；
},
完成：函数（）{
//阿贾克斯完成
vm.load（假）；
}
});
});
ko.应用绑定（vm）；
});

一个供您开始使用的样板文件，使用jQuery和Knockout

HTML

<ul data-bind="foreach: employees">
    <li data-bind="css: {current: $data == $root.selected()}, click: $root.selected">
      #<span data-bind="text: id"></span> - <span data-bind="text: name"></span>
    </li>
</ul>
<div data-bind="slideVisible: ! loading(), html: employee_detail"></div>

JS

.current {
    background: blue;
    color: white;
}
ul>li {
    list-style: none;
}

$(function() {
    // for your requirment on sliding animation, this slideVisible is copied from http://knockoutjs.com/documentation/custom-bindings.html
    ko.bindingHandlers.slideVisible = {
        update: function(element, valueAccessor, allBindings) {
            var value = valueAccessor();
            var valueUnwrapped = ko.unwrap(value);
            var duration = allBindings.get('slideDuration') || 400;
            if (valueUnwrapped == true)
                $(element).slideDown(duration); // Make the element visible
            else
                $(element).slideUp(duration);   // Make the element invisible
        }
    };

    var vm = {
        employees: ko.observableArray([
            // build your initial data in php
            {id: 1, name: 'John'},
            {id: 2, name: 'Tom'},
            {id: 3, name: 'Lily'},
            {id: 4, name: 'Bob'}
        ]),
        selected: ko.observable(),  // a placeholder for current selected
        loading: ko.observable(false), // an indicator for ajax in progress
        employee_detail: ko.observable()  // holder for content from ajax return
    };

    // when user selects an employee, fire ajax
    vm.selected.subscribe(function(emp) {
        var emp_id = emp.id;

        // ajax starts
        vm.loading(true);

        $.ajax('/echo/html/?emp_id='+emp_id, {
            // just a simulated return from jsfiddle
            type: 'POST',
            data: {
                html: "<b>Employee #" + emp_id + "</b><p>Details, bla bla...</p>",
                delay: 0.2
            },

            success: function (content) {
                // update employee_detail
                vm.employee_detail(content);
            },
            complete: function() {
                // ajax finished
                vm.loading(false);
            }
        });
    });

    ko.applyBindings(vm);
});

$（函数（）{
//根据您对滑动动画的要求，此SlideVible复制自http://knockoutjs.com/documentation/custom-bindings.html
ko.bindingHandlers.slidevible={
更新：函数（元素、valueAccessor、allBindings）{
var value=valueAccessor（）；
var valueUnwrapped=ko.unwrapp（值）；
var duration=allBindings.get（'slideDuration'）| | 400；
if（valueUnwrapped==true）
$（元素）.slideDown（持续时间）；//使元素可见
其他的
$（元素）.slideUp（持续时间）；//使元素不可见
}
};
var vm={
员工：ko.Array([
//用php构建初始数据
{id:1，名字：'John'}，
{id:2，名字：'Tom'}，
{id:3，名字：'Lily'}，
{id:4，名称：'Bob'}
]),
所选：ko.observable（），//当前所选对象的占位符
加载：ko.observable（false），//正在进行的ajax的指示器
employee_detail:ko.observable（）//ajax返回内容的持有者
};
//当用户选择员工时，启动ajax
vm.selected.subscribe（功能（emp）{
var emp_id=emp.id；
//ajax启动
vm.loading（true）；
$.ajax（'/echo/html/？emp\u id='+emp\u id{
//只是从JSFIDLE模拟返回
键入：“POST”，
数据：{
html:“员工#”+emp_id+“详细信息，bla bla…
”，
延迟：0.2
},
成功：功能（内容）{
//更新员工信息
vm.员工详细信息（内容）；
},
完成：函数（）{
//阿贾克斯完成
vm.load（假）；
}
});
});
ko.应用绑定（vm）；
});