在Windows 8应用程序中将变量从一个Javascript文件传送到另一个Javascript文件？

Question

Currently pushes hard coded '/video/vid1.MP4' into the list and this URL is diplayed for all items. I want to display the variable I have defined in my Javascript2 under 'content'.

HTML:

<video id=vid src='#' data-win-bind="src: videoUrl" />

JavaScript1:

        for (var i = 0; i <= this._items.length; i++) {
            list.push({ videoUrl: '/video/vid1.MP4' });
        }

This is used to generate data in different views! I want to call the variable stored in content into the javascript below under videoUrl.

JavaScript2:

var video = "/video/vid.mp4";    
     var sampleItems = [
                    { group: sampleGroups[0], content: video},
                    { group: sampleGroups[0],content: video},
                    { group: sampleGroups[0], content: video}
     ];

Essentially I want to use'content' rather then a hard coded url. I want to carry information from one JavaScript file to a different one.

eg. list.push({ videoUrl: content });

Answer 1

Are you attempting to push each item from sampleItems array into a new array called list?

if so:

for (var i = 0; i <= this._items.length; i++) {
    list.push({ videoUrl: this._items[i].content });
}

however if this._items is not the same thing as sampleItems you can access the items inside sampleItems like you would any array. sampleItems[0] gives you the first object in the array. In this case it is:

{ group: sampleGroups[0], content: "/video/vid.mp4"}

This object has two properties 'group' and 'content' which can be accessed like so:

sampleItems[0].content

EDIT:

You also need to fix your for loop it so doesn't attempt to access the array at an index larger than its length.

for (var i = 0; i < this._items.length; i++) {

Answer 2

If I understand this correctly, you're new to JavaScript and aren't familiar with out variable scoping works.

By default, anything you define outside of a function scope is added to the global namespace, and available to JavaScript from any file in your project (so long as it's running in the same script context - so not in an iframe/webview or a WebWorker).

However, the best (and most common) practice is to create a file scope for each JS file using the module pattern. The WinJS templates do this, so you may have followed this pattern without knowing it. If you did, your file probably looks like:

(function () {
// All your code
})();

The result is that all variables and functions in the "all your code" section are scoped to this file. This is A Good Thing.

When you want to expose something outside of this file scope, you need to attach it to the global scope somewhere so that it can be accessed by code running elsewhere. The simplest way to do this is to attach it to the global "window" object. So, you could write:

window.myVideoList = list;

Then myVideoList will be available everywhere (with or without the explicit "window." in front).

A better pattern for this kind of thing, though, is to define namespaces. These are really just objects off of window which in turn have more objects (or more namespace objects) attached. Since it looks like you're using the WinJS library, you can use the WinJS.Namespace facility for this. For example, at the end of your first file (but inside the enclosing function scope), you can write:

WinJS.Namespace.define("DataModel", {
    videoList: list,
});

Then in your other file you write:

{ content: DataModel.videoList[0] } or whatever.

Or, alternatively, you could expose a "getVideoList" function that builds and returns it, or whatever.

Hope that helps!