knockoutあれこれ

 

@extends(‘layout’)

@section(‘content’)

<div>

    <tabledata-bind=“foreach: tableItems”>

        <tr>

            <td data-bind=“text: id”></td>

            <tddata-bind=“if: test1″><ahref=“#”data-bind=“text: test1, attr:{value: id, href:’javascript:updateUsers(‘ + id + ‘)’}”></a></td>

            <td data-bind=“text: test2″></td>

            <td><ahref=“#”data-bind=“attr:{value: id, href:’javascript:deleteUsers(‘ + id + ‘)’}”>削除</a></td>

        </tr>

    </table>

    

    <ahref=“javascript:insertUsers()”>挿入</a>

</div>

<inputtype=“text”>

<buttontype=“button”onClick=“clickBtn()”>OK</button>

<uldata-bind=“foreach: “>

<li><selectdata-bind=“options: selectOptions”></select></li>

</ul>

<style>

table

width: 400px; /* テーブルの横幅 */ 

border-collapse: collapse; /* 枠線の表示方法 */ 

border: 1px black solid; /* テーブル全体の枠線(太さ・色・スタイル) */ 

}

table td {

border: 1px black solid; /* セルの枠線(太さ・色・スタイル) */ 

}

</style>

<script>

var ajaxCrudViewModel = {

tableItems: ko.observableArray([]),

dataItems: {“id” : “”},

selectOptions: ko.observableArray([]),

selectOptionItems:[],

};

ko.applyBindings(ajaxCrudViewModel);

window.onload = function(){

// setBind();

getUsers();

}

// function setBind() {

// $(“.jsDelete”).bind(“click”, function() {deleteUsers($(this).val());});

// }

function getUsers() {

$.ajax({

type: “get”,

url: “ajaxCrud/show”,

dataType: “json”

}).done(function(responce){

ajaxCrudViewModel.tableItems(responce);

}).fail(function(jqxhr, status, error) {

alert(jqxhr + ” “ + status + ” “ + error);

});

}

function insertUsers() {

$.ajax({

type: “post”,

url: “ajaxCrud/insert”,

dataType: “json”,

//data: dataItems

}).done(function(responce){

getUsers();

}).fail(function(jqxhr, status, error) {

alert(jqxhr + ” “ + status + ” “ + error);

});

}

function updateUsers(id) {

var dataItems = {‘id’ : id, ‘test1′ : ’9′};

$.ajax({

type: “post”,

url: “ajaxCrud/update”,

dataType: “json”,

data: dataItems

}).done(function(responce){

getUsers();

}).fail(function(jqxhr, status, error) {

alert(jqxhr + ” “ + status + ” “ + error);

});

}

function deleteUsers(id) {

var dataItems = {‘id’ : id};

$.ajax({

type: “post”,

url: “ajaxCrud/delete”,

dataType: “json”,

data: dataItems

}).done(function(responce){

getUsers();

}).fail(function(jqxhr, status, error) {

alert(jqxhr + ” “ + status + ” “ + error);

});

}

function clickBtn() {

$.ajax({

type: “get”,

url: “ajaxCrud/show”,

dataType: “json”,

}).done(function(responce){

// responce[0].test1

 for(i=0; i<responce.length; i++){

ajaxCrudViewModel.selectOptionItems[i] = responce[i].test1;

 }

ajaxCrudViewModel.selectOptions(ajaxCrudViewModel.selectOptionItems);

}).fail(function(jqxhr, status, error) {

alert(jqxhr + ” “ + status + ” “ + error);

});

}

</script>

@stop