将URL中的observablearray加载到模板中

Question

我对knockoutJS很新，已经完成了他们的互动教程，它提供了非常丰富的信息。

我读了几篇帖子，比如：

1. KnockoutJS observableArray with template and foreach

这非常有用，但我无法掌握如何在我的上下文中应用它的整个概念，因为我从URL获取数据。
我想解决问题的一种方法可能是嵌套模板。
因为有两件事需要完成

1. 将可观察数组发送到模板
2. 遍历每个元素并访问它的属性，以便在tmplate中显示

ToDo：

加载observablearray（），从JSON加载到模板中。





输出应该是这样的：

https://screenshots.firefoxusercontent.com/images/c72ec9d9-075b-40d0-b8cb-f3a4eca76c0d.png

<小时/>




渲染元素

[
  {
    "name": "Bitcoin",
    "symbol": "BTC",
    "balance": 0.001212
  },
  {
    "name": "Ripple",
    "symbol": "XRP",
    "balance": 123.1212
  },
  {
    "name": "Litecoin",
    "symbol": "LTC",
    "balance": 13.1212
  },
  {
    "name": "Digibyte",
    "symbol": "DGB",
    "balance": 1231.1212
  }
]

JSON数据是

    downloadPdf(url: string, body: any, basePage: BaseErrorPage, showSpinner: boolean = false, goBackToMaster: boolean = true) {
    if (showSpinner) {
        basePage.spinner.runningRefCountIncrement();
    }

    let headers = new Headers({ 
        'UserID': this.storage.UserID,
        'ADUserName': this.storage.ADUserName,
        'Content-Type': 'application/json', 
        'Accept': 'application/pdf'
    });        

    let options = new RequestOptions({ headers: headers });
    options.responseType = ResponseContentType.Blob;

    this.http.get(
        url).subscribe(
          (response) => {
            var mediaType = 'application/pdf';
            var blob = new Blob([response.blob], {type: mediaType});
            var filename = 'test.pdf';
            console.log(blob);
            console.log(response);
            saveAs(blob, filename);
          });
}

更新：我添加了一个knockoutJS上下文调试器并添加了ko.toJSON（$ data）

目前我正在获得这样的输出：

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {
	function walletCoin(){
		this.name = ko.observable();
		this.symbol = ko.observable();
		this.balance = ko.observable();
	}

	function WalletViewModel(){
		var self = this;
		self.coins = ko.observableArray([]);	
		$.getJSON("https://api.myjson.com/bins/13ed0p", function(allData){
			console.log(allData);
			for (var i = allData.length - 1; i >= 0; i--) {
				console.log(allData[i]);
				var mappedCoins = ko.mapping.fromJS(allData[i], walletCoin);
				self.coins.push(mappedCoins);
			}
		});
    	console.log(self.coins());
	}
	ko.applyBindings(new WalletViewModel(), document.getElementById("template_wallet"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div class="row">
    <div class="col-sm-12">
    <hr />
	<h2>Debug</h2>
	<div data-bind="text: ko.toJSON(WalletViewModel)"></div>
    <div id="template_wallet" data-bind="template: { name: 'wallets_display_tmp', foreach:coins }"></div>
    <script type="text/html" id="wallets_display_tmp">
        <h2>Wallets <br>
            <small>Estimated Value: 0.00318249 BTC / 47.39 USD</small>
        </h2>
        <hr />
        <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th class="text-center">Currency Name</th>
                <th class="text-center">Symbol</th>
                <th class="text-center">Amount</th>
                <th class="text-center">Deposit/Withdraw</th>
              </tr>
            </thead>
            <tbody>
            <tr>
                <td class="text-center" data-bind="text: name"></td>
                <td class="text-center" data-bind="text: symbol"></td>
                <td class="text-center" data-bind="text: balance"></td>
	            <td class=" options">
	                <div class="center-block text-center">
	                    // <button type="button" class="btn btn-primary btn-xs text-center pop" data-toggle="modal" data-target=".modal" style="margin:-6px 2px" data-purpose="deposit" data-coin=<%= wallet.get('name') %>><span class="fa fa-plus"></span></button>
	                    // <button type="button" class="btn btn-primary btn-xs text-center pop" data-toggle="modal" data-target=".modal" style="margin:-6px 2px" data-purpose="withdrawal" data-coin=<%= wallet.get('name') %> ><span class="fa fa-minus"></span></button>
	                </div>
	            </td>
              </tr>
            </tbody>
        </table>
    </script>
        <!-- <div class="container">
            <canvas id="live_exchange_chart"></canvas>
        </div> -->
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

请检查：

<script>
$(document).ready(function() {
    function walletCoin(){
        this.name = ko.observable();
        this.symbol = ko.observable();
        this.balance = ko.observable();
    }

    function WalletViewModel(){
        var self = this;
        self.coins = ko.observableArray([]);    
        $.getJSON("https://api.myjson.com/bins/13ed0p", function(allData){
            console.log(allData);
            for (var i = allData.length - 1; i >= 0; i--) {
                console.log(allData[i]);
                var mappedCoins = ko.mapping.fromJS(allData[i], walletCoin);
                self.coins.push(mappedCoins);
            }
        });
        console.log(self.coins());
    }
    ko.applyBindings(new WalletViewModel(), document.getElementById("template_wallet"));
});

</script>

以下是jsfiddle。

Answer 2

      self.coins = ko.computed(function () {
        var coins = {};
        self.days = '';

        $.ajax({
            type: "GET",
            dataType: "json",
            url: yoururl,
            data: {},
            async: false,
            success: function (response) {
                if (response.items) {
                    for (var i = 0; i < response.items.length; i++) {
                        coins[i] = {
                            name: response.items[i].name,
                            symbol: response.items[i].symbol,
                            balance: response.items[i].balance
                        };
                    }
                }
            },
            error: function () {
                console.log('error');
            }
        });
        return coins;
    });

我不完全理解你的问题，但我想你需要这样的东西？