引用存储在 ObservableArray 中的数组中的信息

Question

目前我正在从在线存储的两个 JSON 文件中提取信息。我的目标是在我的应用程序中显示存储在这些文件中的信息，一个用于内容，另一个用于可应用于内容的属性，如背景和字体颜色。

我的主要问题是：

我正在尝试用其他数组填充 ObservableArray，然后引用 XML 文件中每个数组中存储的信息。一个相当简单的想法，是吗？

内容JSON

{
"content": [
  {
    "description": "If youâ€™ve been dreaming about owning a customizable smartwatch, the modular watch that London-based Blocks promised is now available ...",
    "image": "https:\/\/cdn3.vox-cdn.com\/thumbor\/mOV6mjP_AI50YsQDbQ81444XEB4=\/0x21:2520x1701\/1310x873\/cdn0.vox-cdn.com\/uploads\/chorus_image\/image\/49811865\/hero-bg_2x.0.0.jpg",
    "created_utc": "1467036570",
    "title": "The Blocks modular smartwatch can now be pre-ordered",
    "type": "04",
    "url": "http:\/\/www.theverge.com\/circuitbreaker\/2016\/6\/9\/11894152\/blocks-modular-smartwatch-pre-order"
  },
  {
    "description": "At Lenovo TechWorld, we got a glimpse at the Moto Z's developer mod kit and how it can be used to make wacky and weird slip-on attachments.",
    "image": "http://img.youtube.com/vi/A0YFmMEjXP0/mqdefault.jpg",
    "created_utc": "1467032545",
    "title": "Lenovo's Experimental Moto Mods",
    "feedid": "03",
    "url": "https://www.youtube.com/watch?v=A0YFmMEjXP0"
  },
  {
    "description": "",
    "image": "https://pbs.twimg.com/media/CkmZk8QXIAEKnTF.jpg",
    "created_utc": "1467035885",
    "title": "The US just approved six airlines to begin flying to Cuba",
    "feedid": "02",
    "url": "http://www.theverge.com/2016/6/10/11903034/us-cuba-airlines-american-southwest-frontier-jetblue"
  },
  {
    "description": "'Texts from Hillary' photo raised questions about Clinton email habits at State Department",
    "image": "https://cdn1.vox-cdn.com/thumbor/COJRCv7KVVwj3uO5qt1XHZ5F02Y=/0x82:3010x2089/1280x854/cdn0.vox-cdn.com/uploads/chorus_image/image/49821307/AP_16147060028688.0.0.jpg",
    "created_utc": "1467036728",
    "title": "The photo went viral enough to catch the eye of the State Department.",
    "feedid": "01",
    "url": "https://www.facebook.com/verge/posts/1116679778368364"
  },
  {
    "description": "One of the benefits of being (somewhat) bilingual is you get double the internet content. I feel very blessed to be able to enjoy both American internet full of...",
    "image": "https://cdn2.vox-cdn.com/thumbor/gM8KeNQUzto6fmdot7wfA_q9jSs=/0x0:3000x2000/1310x873/cdn0.vox-cdn.com/uploads/chorus_image/image/49820235/GettyImages-499350590.0.jpg",
    "created_utc": "1467036669",
    "title": "If you drop an ant from the top of the Empire State Building, will it die?",
    "feedid": "04",
    "url": "http://www.theverge.com/tldr/2016/6/10/11894028/ant-dropped-from-empire-state-building-science-experiment"
  },
  {
    "description": "Tesla has denied that its cars suffer from suspension defects, suggesting that comments from the US National Highway Traffic Safety Administration (NHTSA) have been misinterpreted.",
    "image": "https://cdn2.vox-cdn.com/thumbor/IAh-NZAZzH_AwdO2ubVMKlZkB2Y=/187x0:2212x1350/1310x873/cdn0.vox-cdn.com/uploads/chorus_image/image/49819011/model-s-photo-gallery-06.0.0.jpg",
    "created_utc": "1467042890",
    "title": "Tesla denies Model S suspension defects, chides journalist in blog post",
    "feedid": "04",
    "url": "http://www.theverge.com/circuitbreaker/2016/6/9/11894152/blocks-modular-smartwatch-pre-order"
  }
]
}

来源和属性 JSON

{
  "sources": [
    {
      "category":"news",
      "subject":"technology",
      "adsenabled":true,
      "bannerimgsrc":"https://www.camplaurel.com/images/pagegraphics/home/l-header-bg.jpg",
      "rowbgimgsrc":"https://www.camplaurel.com/images/pagegraphics/home/l-header-bg.jpg",
      "titlebgcolor":"#ffffff",
      "row2ndcolor":"#000000",
      "rowtxtcolor":"#e22805",
      "rowbgcolor":"#ffffff",
      "iconsrc": "https://pbs.twimg.com/profile_images/615501837341466624/I4jVBBp-.jpg",
      "id": 1,
      "shortname": "verge",
      "name": "The Verge"
    },
    {
      "category":"news",
      "subject":"leisure",
      "adsenabled":true,
      "bannerimgsrc":"https://pbs.twimg.com/profile_banners/275686563/1433249898/1500x500",
      "rowbgimgsrc":"null",
      "titlebgcolor":"#ece4d1",
      "row2ndcolor":"#9b4e34",
      "rowtxtcolor":"#6b2e1e",
      "rowbgcolor":"#ece4d1",
      "iconsrc": "https://camo.githubusercontent.com/b13830f5a9baecd3d83ef5cae4d5107d25cdbfbe/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3732313033382f313732383830352f35336532613364382d363262352d313165332d383964312d3934376632373062646430332e706e67",
      "id": 1,
      "shortname": "Laurel South",
      "name": "Camp Laurel South, Mains Premier Sleep Over Camp"
    }
  ]
,
  "feeds": [
    {
      "hidden": false,
      "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png",
      "id": 1,
      "notistat": "Sound and Text",
      "sourceid":1,
      "title": "The Verge Facebook"
    },
    {
      "hidden": false,
      "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png",
      "id": 2,
      "notistat": "Sound and Text",
      "sourceid":1,
      "title": "The Verge Twitter"
    },
    {
      "hidden": false,
      "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png",
      "id": 3,
      "notistat": "Sound and Text",
      "sourceid": 1,
      "title": "The Verge Youtube"
    },
    {
      "hidden": false,
      "iconsrc": "http://icons.iconarchive.com/icons/danleech/simple/1024/facebook-icon.png",
      "id": 4,
      "notistat": "Sound and Text",
      "sourceid": 1,
      "title": "The Verge RSS"
    }
  ]
}

我的 JavaScript 文件使用一个列为 bindingContext 的变量作为页面的 bindingContext。 myArray 是 bindingContext 的一部分，并被我的 JSON 映射和加载函数推入，至少在理论上是这样。

var Observable = require('data/observable').Observable;
var ObservableArray = require('data/observable-array').ObservableArray;
var http = require("http");
var moment = require('moment');
var frameModule = require('ui/frame');
var bindingContext = new Observable({
  title: "Loading...",
  myArray: new ObservableArray()
});


function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = bindingContext;

    loadSources();
    loadFeeds();
    loadContent();
}

function loadContent() {
  var content = [];
    http.getJSON("http://www.doesntmatter.com/jsoncontent.php")
    .then(function (r) {
        bindingContext.title = 'Notifications Up to Date';

         r.content.map( function(item) {
             item.friendlyTime = moment(item.created_utc * 1000).fromNow();
             content.push(item);

         });
         bindingContext.myArray.push(content);
         console.log("content loaded.");
    });
}

function loadSources() {
  var mysources = [];
    http.getJSON("http://www.secrets.com/jsonsource.php")
    .then(function (r) {
         r.sources.map( function(item) {
           mysources.push(item);
           console.log(item.name);
         });
    });
    bindingContext.myArray.push(mysources);
    console.log("sources loaded!");
    };
}
//LoadSources should add all listed Sources into an array of sources, which is then pushed into the larger "myArray" which allows coloration and other css items to be determined for each object within an array

function loadFeeds() {
  var myfeeds = [];
    http.getJSON("http://www.shhhhhhhh.com/jsonsource.php")
    .then(function (r) {
         r.feeds.map( function(item) {
             myfeeds.push(item);
         });
         bindingContext.myArray.push(myfeeds);
         console.log("feeds loaded.");
    });
}
//LoadFeeds should add all listed feeds into an array of feeds, which is also loaded into "myArray", which can then be drawn from to create individual color schemes

exports.pageLoaded = pageLoaded;

我遇到很多麻烦的部分是正确引用 JavaScript 文件和 XML 文件中的数组、子数组和每个内容，因为知识有点生疏两种语言的。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">

<Page.actionBar>
  <ActionBar title="Notify">
  </ActionBar>
</Page.actionBar>

<ListView items="{{ myArray }}" itemTap="itemTap" loadMoreItems="loadMoreItems" class="containter">
  <ListView.itemTemplate>
    <GridLayout rows="21,*,*" columns="90,*" width="*" height="*" >
     <!-- <Image row="0" col="0" colSpan="1" rowspan="3" src="{{ getItem[2].image }}" />  -->
    <!-- <Label row="0" col="1" colSpan="1" class="time" text="{{  friendlyTime  }}" textAlignment="right" /> -->
    <!-- <Label row="1" col="1" colSpan="1" class="title" text="{{ content.title }}" margin="1" textWrap="true" /> -->
    <!-- <Label row="2" col="1" colSpan="1" class="description" text="{{ description }}" textWrap="true" backgroundColor="{{ this is where I would want to reference the contents of the subarrays}}" /> -->
    </GridLayout>
  </ListView.itemTemplate>
</ListView>
</Page>

再次重申：我有一个 ObservableArray，它是页面 bindingContext 的一部分。这是用其他数组填充的，每个数组都填充了我想应用于我的 XML 文件的信息。如何使用 JavaScript 和 XML 的正确语法来引用此信息？

Answer 1

我认为您实际上需要重新考虑您的设计。 ;-)

我遇到的第一个问题是 myArray[0] 可能最终成为 content、sources 或提要。就因为你运行代码：

loadSources();
loadFeeds();
loadContent();

以同步方式，不保证结果顺序；这些中的每一个都从异步源（即在本例中为 http）加载文件；根据这些 ASYNC 源中的哪一个实际首先响应其数据，它将首先放入您的 MyArray 中。 ;-)

你的第二个问题是 <ListView items="{{ myArray }}"

只会创建三个 GridLayout 模板；因为它们只是基于您的数据的三个 myArray 项目（即内容、提要、来源）；我很确定您不只是想显示三个订单项。

现在的问题是，您是否需要将每个项目 link 提供给 Feed 的来源，或者您只想组合所有三种类型并根据其类型不同地显示每种类型的订单项它。

引用存储在 ObservableArray 中的数组中的信息

Referencing information within arrays stored with an ObservableArray

javascript

arrays

json

nativescript