GitHub<\/a>).<\/p>\n1. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441 Knockout<\/h2>\n
\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (MusicViaKnockout\\Index.cshtml) \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0434\u043b\u044f Knockout \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u2014 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 (data-bind) DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a view-\u043c\u043e\u0434\u0435\u043b\u0438: <\/p>\n
<div> <div class="genres"> <div style="font-weight: bold">Genres:<\/div> <div data-bind="foreach: genres"> <div> <input type="checkbox" data-bind="value: GenreID, checked: $root.genresFound, event: {change: genresChanged}"> <span class="js-genres" data-bind="text: Genre"><\/span> <\/div> <\/div> <\/div> <div class="selects"> <div> <label>Performers:<\/label> <select data-bind="options: performers, optionsText: 'Performer', optionsValue: 'PerformerID'"><\/select> <\/div> <div> <label>Composers:<\/label> <select data-bind="options: composers, optionsText: 'Composer', optionsValue: 'ComposerID'"><\/select> <\/div> <div> <label>Albums:<\/label> <select data-bind="options: albums, optionsText: 'Album', optionsValue: 'AlbumID'"><\/select> <\/div> <div> <label style="clear: both">Casts:<\/label> <select data-bind="options: casts, optionsText: 'Cast', optionsValue: 'CastID'"><\/select> <\/div> <\/div> <\/div> <div class="musicContainer"> <div class="musics"> <label>Musics:<\/label><br \/> <div style="overflow-y: scroll; height: 500px"> <table data-bind="foreach: musics"> <tr> <td> <div data-bind="text: Music"><\/div> <\/td> <\/tr> <\/table> <\/div> <\/div> <\/div> <\/code><\/pre>\n \u0410 \u0432\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 view-\u043c\u043e\u0434\u0435\u043b\u044c: <\/p>\n
$(function() { var musicViewModel = { genres: ko.observableArray(), genresFound: ko.observableArray(), performers: ko.observableArray(), composers: ko.observableArray(), albums: ko.observableArray(), casts: ko.observableArray(), musics: ko.observableArray() }; mapServerData = function(data) { if (!data) return; musicViewModel.genres(data.Filters.Genres); musicViewModel.genresFound(data.Filters.GenresFound); musicViewModel.performers( data.Filters.Performers); musicViewModel.performers.unshift({PerformerID: -1, Performer: 'All'}); musicViewModel.composers(data.Filters.Composers); musicViewModel.composers.unshift({ComposerID: -1, Composer: 'All'}); musicViewModel.albums(data.Filters.Albums); musicViewModel.albums.unshift({AlbumID: -1, Album: 'All'}); musicViewModel.casts(data.Filters.Casts); musicViewModel.casts.unshift({CastID: -1, Cast: 'All'}); musicViewModel.musics(data.Filters.Musics); }, genresChanged = function (data, event) { $.ajax({ url: "\/Music\/FilterMusics", type: "GET", data: { genreIDs: ko.toJS(musicViewModel.genresFound), "composerID": null, "albumID": null, "performerID": null, "castID": null }, traditional: true, timeout: 30000, success: function (data) { mapServerData(data); } }); } $.getJSON("\/api\/MusicWebAPI", function (data) { mapServerData(data); ko.applyBindings(musicViewModel); }); }); <\/code><\/pre>\n \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 Knockout, \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u044b\u0437\u043e\u0432\u043e\u043c $.getJSON("\/api\/MusicWebAPI"), \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a view-\u043c\u043e\u0434\u0435\u043b\u0438. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0438 \u043a\u043e\u0434, \u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u044b \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b. \u042d\u0442\u043e \u2014 \u043d\u0435\u043e\u0441\u043f\u043e\u0440\u0438\u043c\u043e\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u043e Knockout.<\/p>\n
2. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 React <\/h2>\n
\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 (..\/Views\/Music\/Index.cshtml): <\/p>\n
@using MusicChoice2.HtmlHelpers @using Newtonsoft.Json @using React.Web.Mvc @model MusicChoice.ViewModels.MusicViewModel @{ ViewBag.Title = "title"; } <script src="@Url.Content("~\/Scripts\/jquery.min.js")"><\/script> <script src="@Url.Content("~\/Scripts\/underscore-min.js")"><\/script> <script src="@Url.Content("~\/Scripts\/react.js")"><\/script> <script src="@Url.Content("~\/Scripts\/react-dom.js")"><\/script> <script src="@Url.Content("~\/Scripts\/MusicChoice\/MusicFilters.jsx")"><\/script> <script src="@Url.Content("~\/Scripts\/MusicChoice\/MusicChoice.js")"><\/script> <link rel="stylesheet" href="..\/..\/Styles\/music.css"> <div> @Html.React("MusicFilters", new { albums = Model.Filters.Albums, casts = Model.Filters.Casts, composers = Model.Filters.Composers, genres = Model.Filters.Genres, performers = Model.Filters.Performers, genresFound = Model.Filters.GenresFound, musics = Model.Filters.Musics, albumID = Model.Filters.AlbumID, castID = Model.Filters.CastID, composerID = Model.Filters.ComposerID, performerID = Model.Filters.PerformerID, onFilterChanged = "music.onFilterChanged" }, "containerId") @Html.ReactInitJavaScriptAndAssignIds(new[] { "music.filters" }) <\/div> <\/code><\/pre>\n \u0417\u0434\u0435\u0441\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u2014 MVC helper (@Html.React(\u00abMusicFilters\u00bb\u2026 ), \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n
\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0430\u043c React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/b><\/p>\n\n
var MusicFilters = React.createClass({ getDefaultProps: function() { return { defaultLoadParameters : {} } }, getInitialState: function() { return { performers: this.props.performers , genres: this.props.genres , genresFound: this.props.genresFound , musics: this.props.musics , albums: this.props.albums , composers: this.props.composers , casts: this.props.casts , selected: { performerID: this.props.performerID , musicID: this.props.musicID , albumID: this.props.albumID , composerID: this.props.composerID , castID: this.props.castID } } }, render: function() { var onFilterChanged = this.onFilterChanged; var musicFilters = this; var genresContains = function(genreID) { var contains = false; musicFilters.state.genresFound.forEach(function (g) { if (g == genreID) { contains = true; } }); return contains; }; var onGenreChanged = this.onGenreChanged; var renderDropDown = function(title, id, values, selectedValue, optionIndex, optionValue, selectedParameter, labelStyle) { return (values !== undefined && values !== null)? <div> <label style={labelStyle}>{title + ':'}<\/label> <select id={id} value={selectedValue || -1} onChange={onFilterChanged.bind(musicFilters, selectedParameter)}> <option key={-1} value={-1}>All<\/option> { values.map(function (val, idx) { return <option key={idx} value={val[optionIndex]}>{val[optionValue]}<\/option> }) } <\/select> <\/div>:<div>No data<\/div> }; return (this.state.genres !== undefined && this.state.genres !== null)? <div> <div> <div> <div className="genres" id="genres"> <div style={{"font-weight":"bold"}}>Genres:<\/div> { this.state.genres.map(function (val, idx) { return <div key={idx}> <input checked={genresContains(val["GenreID"])} type="checkbox" value={val["GenreID"]||null} onChange={onGenreChanged.bind(musicFilters)}\/> <span className="js-genres">{val["Genre"]}<\/span> <\/div> }) } <\/div> <div className="selects"> { renderDropDown("Performers", "performers", this.state.performers, musicFilters.state.selected.performerID, "PerformerID", "Performer", "performerID" ) } { renderDropDown("Composers", "composers", this.state.composers, musicFilters.state.selected.composerID, "ComposerID", "Composer", "composerID" ) } { renderDropDown("Albums", "albums", this.state.albums, musicFilters.state.selected.albumID, "AlbumID", "Album", "albumID" ) } { renderDropDown("Casts", "casts", this.state.casts, musicFilters.state.selected.castID, "CastID", "Cast", "castID", {clear:"both"}) } <\/div> <\/div> <div className="musicContainer"> <div className="musics"> <label>Musics:<\/label><br\/> <div style={{"overflow-y": "scroll", "height": "500px"}}> <table> <tbody> { this.state.musics.map(function (val, idx) { return <tr><td>{val["Music"]}<\/td><\/tr>; }) } <\/tbody> <\/table> <\/div> <\/div> <\/div> <\/div> <\/div>: <div>No data<\/div>; }, \/\/ end of lifetime methods \/\/\/\/\/\/ raiseEvent: function(eventHandler, eventArgs) { if (eventHandler) { if (typeof(eventHandler) === 'string') { eval(eventHandler(this, eventArgs)); } else { eventHandler(this, eventArgs); } } }, onFilterChanged: function(selectedParameter, e) { var selected = _.clone(this.state.selected); selected[selectedParameter] = parseInt($(e.currentTarget).val()) || null; this.setState( {selected: selected} , this.raiseEvent.bind(this, eval(this.props.onFilterChanged), selected) ); }, onGenreChanged: function() { var genresFound = []; $("#genres").find("input:checked").map(function() { genresFound.push(parseInt($(this).val())); }); var stateCopy = music.deepCopy(this.state); stateCopy.genresFound = genresFound; this.setState(stateCopy); music.reLoadDetailsAndFilters( {genreIDs: genresFound, performerID: this.state.selected.performerID, albumID: this.state.selected.albumID, composerID: this.state.selected.composerID, castID: this.state.selected.castID}); }, areNullablesEqual: function(first, second) { return first === second || (first === null && second === null); } }); <\/code><\/pre>\n <\/div>\n<\/div>\n
\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, React \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u0435\u0435. \u0413\u043b\u0430\u0432\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0438\u0437-\u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 render. \u042d\u0442\u043e \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e React \u0432\u043e\u0437\u043b\u0430\u0433\u0430\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043d\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430.<\/p>\n
\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u044f \u0441\u043a\u043b\u043e\u043d\u0438\u043b\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 Knockout. \u041e\u0434\u043d\u0430\u043a\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u2014 \u043c\u0430\u043b\u043e\u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043c\u0435\u0436\u0434\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u0438 \u043f\u0443\u0441\u0442\u044b\u0445 \u0434\u0440\u043e\u043f\u0434\u0430\u0443\u043d\u043e\u0432, \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u0422. \u0435. \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 \u043f\u0443\u0441\u0442\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:
![](\"https:\/\/habrastorage.org\/files\/5b1\/de1\/91f\/5b1de191fc0447d9b99413be3d574338.png\"\/)
<\/p>\n
\u0418 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0443\u0441\u0442\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u043c\u0438:
![](\"https:\/\/habrastorage.org\/files\/bcb\/c90\/24e\/bcbc9024ea8a4163b1a6f4cc1ceb604f.png\"\/)
<\/p>\n
\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 300. <\/p>\n
\u042f \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0434\u043e 15 000 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0430\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u043e\u0442\u0447\u0435\u0442\u043b\u0438\u0432\u043e\u0439: <\/p>\n
![](\"https:\/\/habrastorage.org\/files\/dff\/21e\/94b\/dff21e94bebc401abf3d185722678da4.png\"\/)